显示/隐藏按类选择选项

我预先选择最常用的apx选项。 300选择元素，并希望区分这些值何时仍处于初始预选/默认状态与用户通过单击表单元素主动选择该值时的区别（表示他们主动决定离开它设置为该值） 。

为了做到这一点，我为每个预先选择的值创建了一对选项（值略有不同，即value="50"对value="50_Default" ），当点击元素时，我想要隐藏预先选择的选项并显示常规选项。 我想使用类作为选择器，以便该函数适用于所有Select元素，无论它们的值如何。

我在调整jQuery的show / hide方法到这种情况时遇到了麻烦，和/或修改了我在SOpost上看到的类似问题的答案，这些问题需要指定函数中的每个选项（即jQuery禁用基于Radio的SELECT选项）选择（需要支持所有浏览器） 。我确实找到了一个显示/隐藏的解决方案按类选择选项，但代码有点过于复杂，我不能自己适应所以我很乐意帮助修改它，如果这是最好的方法https://stackoverflow.com/a/5924965/1056713

我试图沿着这些方向做某事（这些function都不起作用）

JS

 $(".default_set").click(function(){ $(this).children("select option .default_field").hide(); $(this).children("select option .selected_field").show(); }); // Store the hidden options (necessary in IE) $(".hidden_field").hide(); $(this).parent("select option .default_field").removeAttr("selected"); $(this).parent("select option .default_field").hide(); $(this).parent("select option .selected_field").show(); 

HTML

  $0 $50 $50 $100 $150   

这是我得到的最近的（在@kasdega的帮助下） http://jsfiddle.net/chayacooper/VN2Su/13/ ，使用值而不是类。 它也没有正常工作 – 在单击元素之前，小提琴不显示默认值，当我在计算机上运行代码时，我遇到了相反的问题 – 它在单击元素之前显示默认值，但不是它应该隐藏它。

Answer 1

我不会使用hide / show。 我只是操纵元素

 $('select').focus(function() { var option = $(this).find("option[value*=Default]"); option.attr('value', option.attr('value').match(/[0-9]+/)); }); 

http://jsfiddle.net/JHAPp/2/

使用focus来检测用户是否与选择进行了交互。 当发生这种情况时，从值中删除_Default部分（它实际上只是匹配的数字）。

提交表单而不触及任何内容会返回50_Default 。 触摸选择后，它将返回50

Answer 2

以下将显示选择中的默认选项，然后在单击该项时隐藏它并选择它的关联值。

 $(".default_set").focus(function () { $(".default_field").hide(); if ($(".default_field").is(":selected")) { $(".selected_field").show().prop("selected", true); } }); 

DEMO

Answer 3

我会像这样写smth：

 $(".default_set").focus(function () { if ($('.default_field:selected')) { $('.default_field').hide(); $('.selected_field').show(); $('.default_field').removeAttr('selected'); } }); 

希望这有效并帮助您