Help.js:
(function (document) {
Window. Help = window. Help | | {};
Help.redrawselect = function () {
$ ("select"). each (function () {
Help.redrawselectbyobj ($ (this));
});
}
Help.redrawselectbyobj = function (obj) {
if (!$ (obj). Parent (). Hasclass (' Selectbox ')) {
$ (obj). Wrap (' <div class= "Selectbox" tag= "' + $ (obj). attr (' id ') + '"/> ');
$ (obj). After ("<span class= ' selecttext ' ></span><span class= ' select-arrow ' ><a href= ' javascript :; ' class= ' arrow ' ></a></span> ');
}
var val = $ (obj) [0].options[$ (obj) [0].selectedindex].text;
$ (obj). Next (". SelectText"). Text (val);
$ (obj). On (' Change ', function () {
var val = $ (obj) [0].options[$ (obj) [0].selectedindex].text;
$ (obj). Next (". SelectText"). Text (val);
});
}
}) (document);
if (typeof define = = = "function" && define.amd) {
Define ("Help", [], function () {
return help;
});
}
HTML: Using area.js
<div class= "Select" >
<div class= "Selectbox" tag= "province" >
<select id= "s_province" name= "S_province" ></select>
<span class= "SelectText" > Province/Municipality </span>
<span class= "Select-arrow" ><a href= "javascript:;" class= "Arrow" ></a></spa N>
</div>
<div class= "Selectbox" tag= "City" >
<select id= "s_city" name= "s_city" ></select>
<span class= "SelectText" > City/District </span>
<span class= "Select-arrow" ><a href= "javascript:;" class= "Arrow" ></a></span>
</div>
</div>
Js:
<script>
$ (function () {
Help.redrawselect ($ (' select '));//The function here is to replace the value in span with the selected value of select after clicking
});
City style selection, type Formosa glasses City selection