Question

我有一个包含几百个Select元素的表单，为了节省用户的时间，我预先选择了最常用的值。我想区分用户何时没有点击元素与何时主动选择值，因此想要在单击元素时切换默认选项的值。

例如，此select元素的默认值为value="50_Default"，并且会更改为value="50"

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

我想创建一个按值显示/隐藏选项的功能（因为许多元素具有相同的默认值），我需要它在主要浏览器中工作，不过选择选项似乎有点复杂，我在调整jquery的show / hide方法时遇到了麻烦。

我试过的功能不起作用

$(function () {
    $(".default_field").click(function(){
      $('select option[value="50_Default"]').hide()  
      $('select option[value="50"]').show()  
    }
    });
});

我发现了一个更复杂的功能，它可以做到这个（并在FF＆amp; IE中工作），但我不知道如何修改代码以便我可以只显示/隐藏一个选项的默认值和常规值，并引用特定值，以便我可以为具有相同默认值的所有元素使用一个函数。这段代码的工作小提琴在这里：http://jsfiddle.net/chayacooper/YVMzt/18/

<p id="choosetype">
     <select name="category" id="category">
     <option value="">All Food</option>
     <option value="Food1">Fruit</option>
     <option value="Food2">Veggies</option>
     </select>
     <select name="fileType" id="fileType" size="1">
     <option value="Fruit1" class="sub-Food1">Apples</option>
     <option value="Fruit2" class="sub-Food1">Pears</option>
     <option value="Veg1" class="sub-Food2">Peas</option>
     <option value="Veg2" class="sub-Food2">Carrots</option>
     </select>
<span id="optionstore" style="display:none;"></span>
</p>
$(document).ready(function() {
    $('#category').on("change", function() {
    var cattype = $(this).val();
    optionswitch(cattype);
});
});
function optionswitch(myfilter) {
if ($('#optionstore').text() == "") {
    $('option[class^="sub-"]').each(function() {
        var optvalue = $(this).val();
        var optclass = $(this).prop('class');
        var opttext = $(this).text();
        optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
        $('#optionstore').text(optionlist);
    });
}
$('option[class^="sub-"]').remove();
populateoption = rewriteoption(myfilter);
$('#fileType').html(populateoption);
}

function rewriteoption(myfilter) {
var options = $('#optionstore').text().split('@%');
var resultgood = false;
var myfilterclass = "sub-" + myfilter;
var optionlisting = "";

myfilterclass = (myfilter != "")?myfilterclass:"all";
for (var i = 3; i < options.length; i = i + 3) {
    if (options[i - 1] == myfilterclass || myfilterclass == "all") {
        optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="sub-' + options[i - 1] + '">' + options[i] + '</option>';
        resultgood = true;
    }
}
if (resultgood) {
    return optionlisting;
}
}

Answer 1

这似乎是重复的，请查看答案here

您可能想要添加的一件事是删除所选属性。无论你使用show / hide做什么，这都会导致select显示值（即使选中的选项现在已隐藏）。

在您的代码中，我唯一看到的是您的（）和{}不匹配。

这是一个有效的jsfiddle代码......

$(".default_field option[value='50_Default']").removeAttr("selected");
$(".default_field").click(function(){
    $("select option[value='50_Default']").hide();
    $("select option[value='50']").show();
});

如果你能够添加到HTML，那么我会给出类，并将它们用作选择器。这比尝试按价值选择要容易。 IMHO。

Answer 2

我采用@ kasdega建议使用类，而不是试图隐藏/显示一对选项，而是使用replace来操纵元素的值。

$('select').focus(function () {
    var option = $(this).find("option[value*=Default]");
    option.attr('value', option.attr('value').replace(/_Default/g, ''));
});

我在这里发布了一个工作示例：http://jsfiddle.net/chayacooper/JHAPp/6/

显示/隐藏选择元素选项的功能（按值）

2 个答案: