Question

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

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

我无法在这个场景中调整jQuery的show / hide方法，和/或修改我在SO帖子上看到类似问题的答案，这些问题需要指定函数中的每个选项（即{{3}我确实找到了一个显示/隐藏的解决方案按类选择选项，但代码有点过于复杂，我无法自己调整，所以如果这是最好的方法，我会很感激帮助修改它jQuery disable SELECT options based on Radio selected (Need support for all browsers)

我正在尝试沿着这些行做某些事情（这些功能都不起作用）

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的帮助下）https://stackoverflow.com/a/5924965/1056713，使用值而不是类。它也没有正常工作 - 在单击元素之前，小提琴不显示默认值，当我在计算机上运行代码时，我遇到了相反的问题 - 它在单击元素之前显示默认值，但不是它应该隐藏它。

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检测用户是否与select进行了互动。发生这种情况时，请从值中删除_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');
}
});

希望这有效并帮助你

显示/隐藏按类选择选项

3 个答案: