显示/隐藏按类别选择选项 [英] Show/hide Select options by class

问题描述

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

I am pre-selecting the most commonly chosen options for apx. 300 Select elements, and would like to differentiate between when those values are still in their initial pre-selected/default state vs. when a user has actively chosen that value by clicking on the form element (indicating that they made an active decision to leave it set to that value).

为此，我为每个预先选择的值(具有略微不同的值，即value="50"与value="50_Default")创建了一对选项，当单击元素时，我想隐藏预先选择的选项并显示常规选项.我想使用类作为选择器，以便该函数将对所有Select元素都起作用，而不管它们的值如何.

In order to do that I am creating a pair of options for each value that is being pre-selected (with slightly different values i.e.value="50" vs. value="50_Default"), and when the element is clicked I want to hide the pre-selected option and show the regular one. I'd like to use classes as selectors so that the function will work for all of the Select elements, regardless of their values.

我在使jQuery的show/hide方法适应这种情况时遇到麻烦，并且/或者无法修改我在SO发布中针对类似问题所看到的答案，这些问题需要在函数中指定每个选项(即jQuery会根据以下选项禁用SELECT选项选择了广播(需要支持所有浏览器).我确实找到了一种解决方案，该解决方案可以按类显示/隐藏选择"选项，但是代码太复杂了，我无法自行修改，因此希望对它进行修改提供帮助如果这是最好的方法 https://stackoverflow.com/a/5924965/1056713

I'm having trouble adapting jQuery's show/hide method to this scenario, and/or modifying the answers I've seen for similar questions on SO postings which require specifying each of the options in the function (i.e jQuery disable SELECT options based on Radio selected (Need support for all browsers). I did find one solution which shows/hide Select options by class, but the code is a bit too complex for me to adapt on my own so I would appreciate help modifying it if that's the best approach https://stackoverflow.com/a/5924965/1056713

我正在尝试按照以下方式进行操作(这些功能都不起作用)

I'm trying to do something along these lines (Neither of these functions are working)

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

This is the closest I've gotten (with the help of @kasdega) http://jsfiddle.net/chayacooper/VN2Su/13/, using values instead of classes. It's also not working quite right - The fiddle doesn't display the default value before the element is clicked, and when I run the code on my computer I have the opposite issue - it displays the default value before the element is clicked, but doesn't hide it when it should.

推荐答案

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

I wouldn't use hide/show. I would just manipulate the element

$('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部分(它实际上只是匹配的数字).

Use focus to detect the user has interacted with the select. When that happens, remove the _Default part from the value (it's actually just matching digits).

在不触摸任何内容的情况下提交表格将返回50_Default.触摸选择后，它将返回50

Submitting the form without touching anything returns 50_Default. After touching the select, it will return 50

这篇关于显示/隐藏按类别选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！