0

我有一个包含几百个 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 的显示/隐藏方法适应这种情况时遇到问题。

我试过的功能不起作用

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

我发现了一个更复杂的函数可以做到这一点（并且在 FF 和 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;
}
}
4

2 回答 2

1

这似乎是重复的，请在此处查看答案

您可能要添加的一件事是删除选定的属性。无论您对显示/隐藏做什么，这都会导致选择显示该值（即使选择的选项现在已隐藏）。

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

这是您的代码的有效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 中，那么我会给事物类并使用它们作为选择器。这比尝试按值选择更容易。恕我直言。

于 2013-02-20T18:53:04.267 回答
1

我接受了@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/

于 2013-04-14T18:47:49.667 回答