前端select中option的取值和赋值和我个人的一些骚操作
嘿呀，又来了，这是很简单的一次。希望多年后看到这个记录不会脸发烫
最近前端各种各样写。不过有一个需求是这样的
需求是在下拉框中 增加用户自定义的内容，嗯，没什么难度。
然后根据用户选择的自定义内容，填上 上下班时间。emmm~好像也可以。让我思索下....
首先数据格式是这样的。用“；”分隔，用“，”间隔。
早班，08:00，18:00；晚班，10:00，22:00
这个不难，拆分就可以了。现在第一个问题，拆分后我可以把早晚班给输入进去到select中的option里。
但是第二个需求根据选择班次来进行2个input中的时间自动填入。
首先，在正常情况下大多数时候我都会选择使用隐藏文本域来达到目的，根据获取到的select，option值来取对应文本域中的值在赋值出去。
但是在select下只能写option，这条路给我绝了。
好吧，既然最擅长的给我封杀了，那就想另一条路。
根据select中change后获取到的选项，我在外面再ajax加载获取一次数据怎么样，然后填充。
啊，这个想法好可怕（好麻烦），每次切换都要加载拉一遍，估计会被锤死。
那既然这样，我就把目光放在了select的option中。
这一次我把隐藏文本域的目标放在了option上，然后细细的琢磨。
嘿，有了。 上代码。
1 <select jq-select id="ModifierLoginNo" name="ModifierLoginNo" class="form-control"> 2 <option value="">==选择班次==</option> 3 @for (int i = 0; i < loopArr.Count; i++) 4 { 5 if (loopArr[i] != "") 6 { 7 <option value="@i">@loopArr[i] </option> 8 <option value="@(i+1)" style="display:none" >@loopArr[i + 1]</option> 9 <option value="@(i+2)" style="display:none" >@loopArr[i + 2]</option> 10 i += 2; 11 } 12 }
敲黑板，为我自己的聪明点赞。
然后问题就来了，我怎么取出来option的值，
我。忘。了。！！
说干就干（查百度）
直接上获取 option值的代码
1 <script type="text/javascript"> 2 $(function () { 3 $("[jq-select]").bind("change", function () { 4 var currentSelect = this.value; 5 var startWork = $("[jq-select] option[value=" + (+currentSelect + 1) + "]").text(); 6 var endWork = $("[jq-select] option[value=" + (+currentSelect + 2) + "]").text(); 7 $('[jq-startWork]').val(startWork); 8 $('[jq-endWork]').val(endWork); 9 if (currentSelect == "") { 10 $('[jq-startWork]').val(""); 11 $('[jq-endWork]').val(""); 12 } 13 }) 14 }); 15 </script>
获取方式为5-6行的代码。
这里使用的是jquery的复合选择器。在这里不得不在赞扬下，这么写实在太方便了。
好的，现在获取值拿到了，放入到指定框内不就很随意了嘛。。。。
自此，我们完成了option异位取值的过程。
那么有的小伙伴就说了，我不要这种方式取值，我就想要我选中的那个值。怎么办？
放心，我们程序员都是有头有尾的。
比如现在，我既然选择了这个选项，我就必须要给他存到db里面去。那么获取这个选中的内容应该怎么去写呢？
直接上代码
var sampleGetSelected = $("[jq-select] option:selected").text();
简简单单这样就可以拉
如果你不是获取当中的文本，只是获取value 的话，这样子
var sampleGetSelected = $("[jq-select] option:selected").val()；
养成良好的习惯，“；”不要忘记。
--------------------------------------------------------------------------------------------------------------------------------------------------
然后。。。。。你以为这就完了？
做事要做全套，小伙砸。
在进入这个页面的时候，如果之前有已选择过的班次，那么就要默认选中。下面时间也要对应好。
这个是需求里面没有写的东西，但是你要明白，这个也是你的活儿~
不过。。。
这个简直就是太简单了嘛。
拿到数据库的存储值，和循环中的比对，然后、、、巴拉巴拉巴拉
1 $('[jq-select]').find("option").each(function () { 2 var $this = $(this); 3 if ($this.text().trim() == data.ModifierLoginNo) { 4 $this.attr("selected", true); 5 return false; 6 } 7 });
其实自己写当中还有一些坑，这里就懒得说了，直接上代码悟去把。
核心其实在第四行，如果是选中的，直接给attr里面加上“selected”就可以，不要忘记加true哦
顺带提一嘴，在each中直接使用break 和return是不管用的，需要加 false；
return false;——跳出所有循环；相当于 javascript 中的 break 效果。 return true;——跳出当前循环，进入下一个循环；相当于 javascript 中的 continue 效果
最后，在后台里面改加验证的加验证，该加非空加非空。。。。。。。省略一万字
毕竟，后端永远不要相信前端嘛。
怕打，溜。。。。。
