jQuery - 一个选择的值添加选择如何做到这一点？

发布于 2024-12-29 18:36:10 字数 3980 浏览 1 评论 0原文

我有脚本伪代码：

var value = $('#select2').val();
   var i = 0;
 $(this).click(function(){

   if(value == 0){
     $('.kids').css({display: 'none'});
     $('.kid1').css({display: 'none'}).attr("disabled", "disabled");
   }
   else{
     $('.kids').css({display: ''});
     $('.kid1').css({display: ''}).attr("disabled", "");
   }
 });

和 HTML：

<form action="" id="form" method="post">
    <div class="cloned_div">
    <ul>
     <li>Zakwaterowanie</li>
      <li id="input1" class="inputCopy">
    <ul class="selects">
          <li class="label">Set of selects 1</li>
       <li>Select1: 
        ...
       </li>
            <li>Select2: 
                <select name="Select[Ask][1][Children]" id="select2">
                <option label="0" value="0">0</option>
                <option label="1" value="1">1</option>
                <option label="2" value="2">2</option>
                <option label="3" value="3">3</option>
                <option label="4" value="4">4</option>
                </select>
              </li>
                      <li><ul class="kids" style="display:none">
                  <li class="title">Values of perk: </li>
              <li>

               <select name="Select[Ask][1][ChildrenOfChildren][0]" class="kid1" disabled="disabled" style="display:none">
                 <option label="0" value="0">0</option>
                 <option label="1" value="1">1</option>
                     <option label="2" value="2">2</option>
                 <option label="3" value="3">3</option>
                 <option label="4" value="4">4</option>
               </select>
              </li>
              <li>
               <select name="Select[Ask][1][ChildrenOfChildren][1]" disabled="disabled" class="kid2" style="display:none">
                 <option label="0" value="0">0</option>
                 <option label="1" value="1">1</option>
                 <option label="2" value="2">2</option>
                 <option label="3" value="3">3</option>
                 <option label="4" value="4">4</option>
               </select>
              </li>
              <li>
               <select name="Select[Ask][1][ChildrenOfChildren][2]" class="kid3" disabled="disabled" style="display:none">
                <option label="0" value="0">0</option>
                <option label="1" value="1">1</option>
                <option label="2" value="2">2</option>
                <option label="3" value="3">3</option>
                <option label="4" value="4">4</option>
               </select>
              </li>
              <li>
               <select name="Select[Ask][1][ChildrenOfChildren][3]" class="kid4" disabled="disabled" style="display:none">
                <option label="0" value="0">0</option>
                <option label="1" value="1">1</option>
                <option label="2" value="2">2</option>
                <option label="3" value="3">3</option>
                <option label="4" value="4">4</option>
               </select>
              </li>
            </ul>
                </li>
        </ul>
      </li>

    </ul>`

现在是我的问题：

如何使 Select[Ask][1][Children] 的选定值显示并启用名称为 Select 的选择[询问][1][ChildrenOfChildren][] 因此，如果我选择选项 1，它将显示带有类 kids 的 ul 并启用带有名称的选择选择[Ask][1][ChildrenOfChildren][0]，

但如果我选择选项 4，它将显示并启用所有四个选择等。

可以这样做吗？

原文

i have script pseudocode:

var value = $('#select2').val();
   var i = 0;
 $(this).click(function(){

   if(value == 0){
     $('.kids').css({display: 'none'});
     $('.kid1').css({display: 'none'}).attr("disabled", "disabled");
   }
   else{
     $('.kids').css({display: ''});
     $('.kid1').css({display: ''}).attr("disabled", "");
   }
 });

and HTML :

<form action="" id="form" method="post">
    <div class="cloned_div">
    <ul>
     <li>Zakwaterowanie</li>
      <li id="input1" class="inputCopy">
    <ul class="selects">
          <li class="label">Set of selects 1</li>
       <li>Select1: 
        ...
       </li>
            <li>Select2: 
                <select name="Select[Ask][1][Children]" id="select2">
                <option label="0" value="0">0</option>
                <option label="1" value="1">1</option>
                <option label="2" value="2">2</option>
                <option label="3" value="3">3</option>
                <option label="4" value="4">4</option>
                </select>
              </li>
                      <li><ul class="kids" style="display:none">
                  <li class="title">Values of perk: </li>
              <li>

               <select name="Select[Ask][1][ChildrenOfChildren][0]" class="kid1" disabled="disabled" style="display:none">
                 <option label="0" value="0">0</option>
                 <option label="1" value="1">1</option>
                     <option label="2" value="2">2</option>
                 <option label="3" value="3">3</option>
                 <option label="4" value="4">4</option>
               </select>
              </li>
              <li>
               <select name="Select[Ask][1][ChildrenOfChildren][1]" disabled="disabled" class="kid2" style="display:none">
                 <option label="0" value="0">0</option>
                 <option label="1" value="1">1</option>
                 <option label="2" value="2">2</option>
                 <option label="3" value="3">3</option>
                 <option label="4" value="4">4</option>
               </select>
              </li>
              <li>
               <select name="Select[Ask][1][ChildrenOfChildren][2]" class="kid3" disabled="disabled" style="display:none">
                <option label="0" value="0">0</option>
                <option label="1" value="1">1</option>
                <option label="2" value="2">2</option>
                <option label="3" value="3">3</option>
                <option label="4" value="4">4</option>
               </select>
              </li>
              <li>
               <select name="Select[Ask][1][ChildrenOfChildren][3]" class="kid4" disabled="disabled" style="display:none">
                <option label="0" value="0">0</option>
                <option label="1" value="1">1</option>
                <option label="2" value="2">2</option>
                <option label="3" value="3">3</option>
                <option label="4" value="4">4</option>
               </select>
              </li>
            </ul>
                </li>
        </ul>
      </li>

    </ul>`

now is my question:

How can i make that the selected value of Select[Ask][1][Children] shows and enables the selects with name Select[Ask][1][ChildrenOfChildren][] so if i select option 1 it'll show the ul with class kids and enable select with name Select[Ask][1][ChildrenOfChildren][0]

but if i select option 4 it'll show and enable all four selects etc.

Is it posible to do ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浸婚纱 2025-01-05 18:36:10

既然您提出了如何让您的代码作为注释线程的一部分工作的问题，我想我应该向您发送一个工作示例，而不是在不复制 ID 的情况下处理元素的克隆。这是使用 jQuery 1.7.1 的示例。如果您使用的是旧版本，.on() 事件将不起作用，您必须切换到 .live() 事件。

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
    <style type="text/css">
        /* Hide the children selector by default */
        #perksList li.children ul
        {
            display: none;
        }

        //Hides the bullet points
        ul, ul li
        {
            list-style-type: none;
        }


    </style>
</head>
<body>
    <ul id="perksList">
        <li class="perks">
            <label>Choose Perks</label>
            <ul>
                <li class="adults">
                    <label>Adults:</label>
                    <select name="Select[Ask][0][Adults]">
                        <option label="0" value="0">0</option>
                        <option label="1" value="1">1</option>
                        <option label="2" value="2">2</option>
                        <option label="3" value="3">3</option>
                        <option label="4" value="4">4</option>
                    </select>
                </li>
                <li class="children">
                    <label>Children</label>
                    <select name="Select[Ask][0][Children]">
                        <option label="0" value="0">0</option>
                        <option label="1" value="1">1</option>
                        <option label="2" value="2">2</option>
                        <option label="3" value="3">3</option>
                        <option label="4" value="4">4</option>
                    </select>
                    <ul>
                        <li class="title"><label>Value of perk</label></li>
                        <li>
                            <select name="Select[Ask][0][Children][0]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>                        
                        <li>
                            <select name="Select[Ask][0][Children][1]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>                        
                        <li>
                            <select name="Select[Ask][0][Children][2]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>                        
                        <li>
                            <select name="Select[Ask][0][Children][3]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <input type="button" value="Clone" id="btnClone"/>

    <script type="text/javascript">
        //Store the element as it was when the page was first loaded
        var cloneItem = '<li class="perks">' + $('.perks').clone().html() + '</li>';
        $(document).ready(function () {

            //Using jQuery 1.7.1, the "on" event listens for any new items added.
            //If you're using an older version of jQuery you'll need to use the .live() event
            $(document).on('change', 'li.children > select', function () {
                var parent = $(this).parents('.perks');
                parent.find('li.children ul li select').hide().attr('disabled', 'disabled');

                if ($(this).val() == '0') {
                    parent.find('li.children ul').hide();
                }
                else {
                    parent.find('li.children ul').show();
                    $('li.children ul li select', parent).slice(0, $(this).val()).removeAttr('disabled').show();
                }
            });


            //Handels adding additional rows
            $('#btnClone').click(function () {
                var rowIndex = $('#perksList .perks').length;
                $('#perksList').append(cloneItem);
                $('#perksList .perks:eq(' + rowIndex + ') .adults select').attr('name', 'Select[Ask][' + rowIndex + '][Adults]');
                var listItems = $('#perksList .perks:eq(' + rowIndex + ') .children select');
                listItems.each(function () {
                    var selectIndex = listItems.index(this);
                    if (selectIndex == 0) {
                        $(this).attr('name', 'Select[Ask][' + rowIndex + '][Children]');
                    }
                    else {
                        $(this).attr('name', 'Select[Ask][' + rowIndex + '][Children][' + (selectIndex - 1) + ']');
                    }
                });
            });

        });
    </script>
</body>
</html>

Since you posed the question of how to get your code working as part of the comments thread I figured I'd send you a working sample than handles cloning of the elements without duplicating the ID's. Here is a sample using jQuery 1.7.1. If you are using an older version, the .on() event will not work and you will have to switch to the .live() event.

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
    <style type="text/css">
        /* Hide the children selector by default */
        #perksList li.children ul
        {
            display: none;
        }

        //Hides the bullet points
        ul, ul li
        {
            list-style-type: none;
        }


    </style>
</head>
<body>
    <ul id="perksList">
        <li class="perks">
            <label>Choose Perks</label>
            <ul>
                <li class="adults">
                    <label>Adults:</label>
                    <select name="Select[Ask][0][Adults]">
                        <option label="0" value="0">0</option>
                        <option label="1" value="1">1</option>
                        <option label="2" value="2">2</option>
                        <option label="3" value="3">3</option>
                        <option label="4" value="4">4</option>
                    </select>
                </li>
                <li class="children">
                    <label>Children</label>
                    <select name="Select[Ask][0][Children]">
                        <option label="0" value="0">0</option>
                        <option label="1" value="1">1</option>
                        <option label="2" value="2">2</option>
                        <option label="3" value="3">3</option>
                        <option label="4" value="4">4</option>
                    </select>
                    <ul>
                        <li class="title"><label>Value of perk</label></li>
                        <li>
                            <select name="Select[Ask][0][Children][0]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>                        
                        <li>
                            <select name="Select[Ask][0][Children][1]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>                        
                        <li>
                            <select name="Select[Ask][0][Children][2]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>                        
                        <li>
                            <select name="Select[Ask][0][Children][3]">
                                <option value="0" label="0">0</option>
                                <option value="1" label="1">1</option>
                                <option value="2" label="2">2</option>
                                <option value="3" label="3">3</option>
                                <option value="4" label="4">4 </option>
                            </select>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <input type="button" value="Clone" id="btnClone"/>

    <script type="text/javascript">
        //Store the element as it was when the page was first loaded
        var cloneItem = '<li class="perks">' + $('.perks').clone().html() + '</li>';
        $(document).ready(function () {

            //Using jQuery 1.7.1, the "on" event listens for any new items added.
            //If you're using an older version of jQuery you'll need to use the .live() event
            $(document).on('change', 'li.children > select', function () {
                var parent = $(this).parents('.perks');
                parent.find('li.children ul li select').hide().attr('disabled', 'disabled');

                if ($(this).val() == '0') {
                    parent.find('li.children ul').hide();
                }
                else {
                    parent.find('li.children ul').show();
                    $('li.children ul li select', parent).slice(0, $(this).val()).removeAttr('disabled').show();
                }
            });


            //Handels adding additional rows
            $('#btnClone').click(function () {
                var rowIndex = $('#perksList .perks').length;
                $('#perksList').append(cloneItem);
                $('#perksList .perks:eq(' + rowIndex + ') .adults select').attr('name', 'Select[Ask][' + rowIndex + '][Adults]');
                var listItems = $('#perksList .perks:eq(' + rowIndex + ') .children select');
                listItems.each(function () {
                    var selectIndex = listItems.index(this);
                    if (selectIndex == 0) {
                        $(this).attr('name', 'Select[Ask][' + rowIndex + '][Children]');
                    }
                    else {
                        $(this).attr('name', 'Select[Ask][' + rowIndex + '][Children][' + (selectIndex - 1) + ']');
                    }
                });
            });

        });
    </script>
</body>
</html>

回复收藏 0 原文

海未深 2025-01-05 18:36:10

好的，我创建了一个 JSFiddle。它使用您提供的 HTML，并进行了一个小的更改，我将

移动到了容纳孩子的选择在容纳父母的 LI 内部。这使得找到属于该父级的 .kids 变得更容易：

http://jsfiddle.net/MQtkQ/1/< /a>

和 HTML ：

<ul class="selects"> 
    <li class="label">Set of selects 1</li> 
    <li>Select1:  
    ... 
    </li> 
    <li>Select2:  
        <select name="Select[Ask][1][Children]" id="select2"> 
            <option label="0" value="0">0</option> 
            <option label="1" value="1">1</option> 
            <option label="2" value="2">2</option> 
            <option label="3" value="3">3</option> 
            <option label="4" value="4">4</option> 
        </select>
        <ul class="kids" style="display:none"> 
            <li class="title">Values of perk: </li> 
            <li>
                <select name="Select[Ask][1][ChildrenOfChildren][0]" class="kid1" disabled="disabled" style="display:none"> 
                    <option label="0" value="0">0</option> 
                    <option label="1" value="1">1</option> 
                    <option label="2" value="2">2</option> 
                    <option label="3" value="3">3</option> 
                    <option label="4" value="4">4</option> 
                </select> 
            </li> 
            <li> 
                <select name="Select[Ask][1][ChildrenOfChildren][1]" disabled="disabled" class="kid2" style="display:none"> 
                    <option label="0" value="0">0</option> 
                    <option label="1" value="1">1</option> 
                    <option label="2" value="2">2</option> 
                    <option label="3" value="3">3</option> 
                    <option label="4" value="4">4</option> 
                </select> 
            </li> 
            <li> 
                <select name="Select[Ask][1][ChildrenOfChildren][2]" class="kid3" disabled="disabled" style="display:none"> 
                    <option label="0" value="0">0</option> 
                    <option label="1" value="1">1</option> 
                    <option label="2" value="2">2</option> 
                    <option label="3" value="3">3</option> 
                    <option label="4" value="4">4</option> 
                </select> 
          </li> 
          <li> 
            <select name="Select[Ask][1][ChildrenOfChildren][3]" class="kid4" disabled="disabled" style="display:none"> 
                <option label="0" value="0">0</option> 
                <option label="1" value="1">1</option> 
                <option label="2" value="2">2</option> 
                <option label="3" value="3">3</option> 
                <option label="4" value="4">4</option> 
            </select> 
          </li>
      </ul>
  </li>

还有 JavaScript：

 $('#select2').change(function(){
      var parent = $(this).parent();
      parent.find('ul.kids li select').css({display: 'none'}).attr('disabled','disabled');

 if($(this).val() == '0'){
     parent.find('ul.kids').css({display: 'none'}); 
  } 
  else {
      parent.find('ul.kids').css({display: ''});
      $('ul.kids li select',parent).slice(0,$(this).val()).removeAttr('disabled').css({display: ''});
  }
 });

我自己可能会将子类和可见性放在 LI 而不是选择上。我还会将所有隐藏选择的值更改为 0，以便这些值以 0 的形式发回我的表单，但这就是您的决定。

Ok, I created a JSFiddle. It uses the HTML as you provided with one minor change, I moved the <ul> that houses the children selects inside of the LI that houses the parent. This makes finiding the .kids that belong to that parent easier:

http://jsfiddle.net/MQtkQ/1/

And the HTML :

<ul class="selects"> 
    <li class="label">Set of selects 1</li> 
    <li>Select1:  
    ... 
    </li> 
    <li>Select2:  
        <select name="Select[Ask][1][Children]" id="select2"> 
            <option label="0" value="0">0</option> 
            <option label="1" value="1">1</option> 
            <option label="2" value="2">2</option> 
            <option label="3" value="3">3</option> 
            <option label="4" value="4">4</option> 
        </select>
        <ul class="kids" style="display:none"> 
            <li class="title">Values of perk: </li> 
            <li>
                <select name="Select[Ask][1][ChildrenOfChildren][0]" class="kid1" disabled="disabled" style="display:none"> 
                    <option label="0" value="0">0</option> 
                    <option label="1" value="1">1</option> 
                    <option label="2" value="2">2</option> 
                    <option label="3" value="3">3</option> 
                    <option label="4" value="4">4</option> 
                </select> 
            </li> 
            <li> 
                <select name="Select[Ask][1][ChildrenOfChildren][1]" disabled="disabled" class="kid2" style="display:none"> 
                    <option label="0" value="0">0</option> 
                    <option label="1" value="1">1</option> 
                    <option label="2" value="2">2</option> 
                    <option label="3" value="3">3</option> 
                    <option label="4" value="4">4</option> 
                </select> 
            </li> 
            <li> 
                <select name="Select[Ask][1][ChildrenOfChildren][2]" class="kid3" disabled="disabled" style="display:none"> 
                    <option label="0" value="0">0</option> 
                    <option label="1" value="1">1</option> 
                    <option label="2" value="2">2</option> 
                    <option label="3" value="3">3</option> 
                    <option label="4" value="4">4</option> 
                </select> 
          </li> 
          <li> 
            <select name="Select[Ask][1][ChildrenOfChildren][3]" class="kid4" disabled="disabled" style="display:none"> 
                <option label="0" value="0">0</option> 
                <option label="1" value="1">1</option> 
                <option label="2" value="2">2</option> 
                <option label="3" value="3">3</option> 
                <option label="4" value="4">4</option> 
            </select> 
          </li>
      </ul>
  </li>

And the JavaScript:

 $('#select2').change(function(){
      var parent = $(this).parent();
      parent.find('ul.kids li select').css({display: 'none'}).attr('disabled','disabled');

 if($(this).val() == '0'){
     parent.find('ul.kids').css({display: 'none'}); 
  } 
  else {
      parent.find('ul.kids').css({display: ''});
      $('ul.kids li select',parent).slice(0,$(this).val()).removeAttr('disabled').css({display: ''});
  }
 });

I myself probably would have put the child class and visibility on the LI instead of the select. I would also have changed the value of all of the hidden selects to 0 so that the values post back as 0 to my form, but thats your call.

回复收藏 0 原文

~没有更多了~