按类别显示/隐藏选择选项

Question

我正在为 apx 预先选择最常用的选项。 300 选择元素，并希望区分这些值何时仍处于初始预选/默认状态vs.当用户通过单击表单元素主动选择该值时 （表明他们做出了一个积极的决定，将其设置为该值）。

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

我无法使 jQuery 的显示/隐藏方法适应这种情况，和/或修改我在 SO 帖子上看到的类似问题的答案，这些问题需要指定函数中的每个选项（即 jQuery disable SELECT options based on Radio selected (Need support for all browsers).我确实找到了一种按类显示/隐藏选择选项的解决方案，但是代码对我来说有点太复杂了，无法自己适应，所以如果这是最好的方法，我会很感激修改它https://stackoverflow.com/a/5924965/1056713

我正在尝试按照这些思路做一些事情（这些功能都不起作用）

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

<select name=min_jeans class="default_set">
    <option value=0>$0</option>
    <option value="50_Default" class="default_field" selected=selected>$50</option>
    <option value="50" class="selected_field" style="display:none">$50</option>
    <option value=100>$100</option>
    <option value=150>$150</option>
    <option class="hidden_field" value="hidden_field" style="display:none;"></option>    
</select>

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

Answer 1

我不会使用隐藏/显示。我只会操纵元素

$('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。触摸select后会返回50

Answer 2

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

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

DEMO

Answer 3

我会这样写：

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

希望这对你有帮助