Home/ Questions/Q 7248197
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T22:06:21+00:00

i have script pseudocode: var value = $(‘#select2’).val(); var i = 0; $(this).click(function(){ if(value

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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