jQuery - значение одного выбора добавить выбрать, как это сделать? - PullRequest
Новая
       10

jQuery - значение одного выбора добавить выбрать, как это сделать?

0 голосов
/ 29 января 2012

у меня есть псевдокод сценария: 

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[Ask][1][ChildrenOfChildren][], поэтому, если я выберу опцию 1, оно будет показывать ul с классом kids и разрешать выборку с именем Select[Ask][1][ChildrenOfChildren][0]

но если я выберу вариант 4, он покажет и активирует все четыре варианта выбора и т. Д.

Возможно ли это сделать?

Ответы [ 2 ]

0 голосов
/ 30 января 2012

Поскольку вы поставили вопрос о том, как заставить ваш код работать как часть потока комментариев, я подумал, что я отправлю вам рабочий образец, а не клонирование элементов без дублирования идентификаторов. Вот пример с использованием 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>
0 голосов
/ 30 января 2012

Хорошо, я создал JSFiddle. Он использует HTML, как вы указали, с одним небольшим изменением. Я переместил

...