下拉菜单选项可将“必需”类添加到另一个下拉菜单，但在选中时删除其他选项的类

Posted

技术标签:

【中文标题】下拉菜单选项可将“必需”类添加到另一个下拉菜单，但在选中时删除其他选项的类【英文标题】：Dropdown menu option to add a 'required' class to another dropdown menu but remove the class for the other options when selected 【发布时间】：2013-02-14 05:57:21 【问题描述】：

我需要将某些字段设为“必填”，因此使用了 jquery.validate.js 和 class="required" 等。

唯一的问题是，当在下拉输入中选择某个选项时，我已经扩展了表单，方法是使用以下命令使隐藏的 div 变为可见：Display:None，然后是 Display:Block。

扩展 div 中的一个字段需要是必填字段，但如果我将其设置为 class="required"。即使该字段被隐藏且不需要，验证仍需要该字段的值。

所以，我需要做的是添加或删除 class="required" 或在更改始终显示在表单中的监视选择输入时切换。

这是我尝试编写代码的方式，但它似乎不起作用 非常感谢任何可以提供帮助的人，我希望我的解释是有道理的。

第一个位通过在选择下拉选项时显示隐藏的 div 来扩展表单。

    <script type="text/javascript"> 
    // <![CDATA[ 
    function display(obj,id1,id2,id3)  
    txt = obj.options[obj.selectedIndex].value; 
    document.getElementById(id1).style.display = 'none'; 
    document.getElementById(id2).style.display = 'none'; 
    document.getElementById(id3).style.display = 'none'; 
    if ( txt.match(id1) )  
    document.getElementById(id1).style.display = 'block'; 
     
    if ( txt.match(id2) )  
    document.getElementById(id2).style.display = 'block'; 
     
    if ( txt.match(id3) )  
    document.getElementById(id3).style.display = 'block'; 
      
     
    // ]]> 
    </script> 

    // This is how I have tried to add & remove the required class.

    <script type="text/javascript">

    $('#category').change(function()
        if ( $('#category').val() =='id1' ) 
        $('#size').addClass('required');
     else 
        $('#size').removeClass('required');
    
    

    </script>


    <html>

    <form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm">


    <select id="category" name="category" class="required" onchange="display(this,'id1','id2','id3');">
                                      <option value="">- please select -</option>
                                      <option value="id1">Category1</option>
                                      <option value="id2">Category2</option>
                                      <option value="id3">Category3</option>
    </select>



<div id="id1">

    <select name="size" id="size" class="">
      <option value="">Please Select</option>
      <option value="xsmall">extra small </option>
      <option value="small">small </option>
      <option value="medium">medium</option>
      <option value="large">large </option>
      <option value="xlarge">extra large</option>
    </select>

</div>
    </form>

    </html>

【问题讨论】：

【参考方案1】： 
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script>  
    function display(obj,id1,id2,id3)  
        txt = obj.options[obj.selectedIndex].value; 
        document.getElementById(id1).style.display = 'none'; 
        document.getElementById(id2).style.display = 'none'; 
        document.getElementById(id3).style.display = 'none'; 
        if ( txt.match(id1) ) 
            document.getElementById(id1).style.display = 'block'; 
         
        if ( txt.match(id2) )  
            document.getElementById(id2).style.display = 'block'; 
         
        if ( txt.match(id3) )  
            document.getElementById(id3).style.display = 'block'; 
          
    

    $(document).ready(function()
        $('#category').change(function()
            var selectedValue = $('#category').val();
            $('#size').removeClass('required');
            $('#' + selectedValue + ' > select').addClass('required');
        );
    );
    </script>
</head>
<body>

<form class="orderform" action="FormNext.php" method="post" name="OrderForm" id="OrderForm">


<select id="category" name="category" class="required" onchange="display(this,'id1','id2','id3');">
    <option value="">- please select -</option>
    <option value="id1">Category1</option>
    <option value="id2">Category2</option>
    <option value="id3">Category3</option>
</select>



<div id="id1" style="display:none">

    <select name="size" id="size" class="">
        <option value="">Please Select</option>
        <option value="xsmall">extra small </option>
        <option value="small">small </option>
        <option value="medium">medium</option>
        <option value="large">large </option>
        <option value="xlarge">extra large</option>
    </select>

</div>
<div id="id2" style="display:none">

    <select name="size" id="size" class="">
        <option value="">Please Select</option>
        <option value="xsmall">extra small </option>
        <option value="small">small </option>
        <option value="medium">medium</option>
        <option value="large">large </option>
        <option value="xlarge">extra large</option>
    </select>

</div>
<div id="id3" style="display:none">

    <select name="size" id="size" class="">
        <option value="">Please Select</option>
        <option value="xsmall">extra small </option>
        <option value="small">small </option>
        <option value="medium">medium</option>
        <option value="large">large </option>
        <option value="xlarge">extra large</option>
    </select>

</div>
</form>

我假设您错过了 # 的大小和类别。试着告诉我

# 用于通过 id 和 .用于按类名选择标签，如果要选择元素，则直接提及。

Like this
$('#id').doStuff();
$('.className').doStuff();
$(div).doStuff();
$('[name="ElementNameHere"]').doStuff();

【讨论】：

验证规则还有一个小问题。选择元素总是有一个值，所以总是满足要求的条件。您可能需要添加 ...val() !== "" 我已经更改了很多次，所以在我的帖子中没有意识到id、类或元素本身的调用可能不一致。这可能是它不起作用的原因，但我正在寻找我应该调用其中哪些来让它起作用。我是编码新手，所以如果我没有什么意义，我深表歉意。这个 javascript 看起来是否与上述问题和结果相关。 哦...这种情况下必须通过 回复 darronz 只是在菜单 value="" 中给出第一个选项是不是可以，因为这似乎适用于两个选择菜单中的第一个，如果离开它将停止提交表单在第一个选项上 as 相当于一个空值。 我现在更改了 javascript 代码，使其仅调用输入的#id。似乎仍然无法正常工作。

以上是关于下拉菜单选项可将“必需”类添加到另一个下拉菜单，但在选中时删除其他选项的类的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap下拉菜单

C# combox 设置显示下拉菜单的第一项，如图。还有下拉选项的索引怎么回事，所索引为零是菜单的第一个选项

使用ivx实现移动端单选功能的经验总结

Excel数据有效性设置的下拉菜单内容有多个,但选择时只能单选,如何设置下拉菜单,可以在选择时多选?

请教Excel如何去除下拉菜单空白区域的问题，空白区域有公式。

jquery在下拉菜单中找到所选项目的值