1

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

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

我无法将 jQuery 的显示/隐藏方法适应这种情况，和/或修改我在 SO 帖子上看到的类似问题的答案，这些问题需要指定函数中的每个选项（即基于 Radio 的 jQuery 禁用 SELECT 选项已选择（需要对所有浏览器的支持）。我确实找到了一种按类显示/隐藏选择选项的解决方案，但是代码对我来说有点过于复杂，无法自行调整，因此如果这是最好的方法，我将不胜感激帮助修改它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/，使用值而不是类。它也不能正常工作 - 在单击元素之前，小提琴不显示默认值，当我在计算机上运行代码时，我遇到了相反的问题 - 它在单击元素之前显示默认值，但没有不应该隐藏它。

4

3 回答 3

3

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

$('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

于 2013-03-08T20:16:24.957 回答
1

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

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

演示

于 2013-03-08T20:19:00.030 回答
0

我会这样写：

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

希望这有效并帮助您

于 2013-03-08T20:34:00.027 回答