如何根据动态创建的下拉列表子项更改文本框

时间:2013-03-29 08:34:05

标签: jquery

我想在选择子下拉计数时添加子文本框。我在jsfiddle上尝试了单独的代码http://jsfiddle.net/hs7t8/。在客户选择下拉列表的选择上创建了两个下拉列表。它会在添加房间按钮单击时动态生成两个下拉菜单。第一个是成人,第二个是儿童。在选择儿童下拉列表时,我希望文本框符合选择子项下拉列表。但它没有添加到页面。请帮助我。http://jsfiddle.net/pYRj3/1/

上的完整运行代码
$('#guestsRoomsSelect').change(function () {

        if ($(this).val() === '0') {
               var $var2 = '<div id="dropdown2_ ' + (counter) + ' " class="class1"> <div class="wrapadults" style="float:left"> <label class="lbl_sm" style="font-size: 0.75em" for="adults">Adults</label>'
                $var2 = $var2 + '<br/><span> <span>     <select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;">      <option value="1">1</option>        <option value="2" selected="selected">2</option>'
                $var2 = $var2 + '<option value="3">3</option>       <option value="4">4</option>        <option value="5">5</option>        <option value="6">6</option>        <option value="7">7</option>'
                $var2 = $var2 + '<option value="8">8</option>       <option value="9">9</option>        <option value="10">10</option>      </select>     </span>       </span>  </div>'
                $var2 = $var2 + '<div class="children" > <label class="lbl_sm" style="font-size: .75em;" for="children">Children</label><br/> <span>  <select id="hc_f_children" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;">'
                $var2 = $var2 + '<option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>'
                $var2 = $var2 + '<option value="4">4</option> </select> </span>  </div>   </div>';
                $("#Addition").prepend('<fieldset id="' + counter + '" data-index="' + index + '">' + $var2 + '</fieldset>');
                counter = counter + 1;
                index++;

                $('#roomconfig').show(300);

        }
        else if ($(this).val() === '1-1' || $(this).val() === '3-1' || $(this).val() === '4-1' || $(this).val() === '2-2' || $(this).val() === '2-1') {

          $('#roomconfig').hide(300);

            $('#Addition fieldset :first').remove();  
        } });

    var forage = 0;
    $(".addRoom").click(function () {
        // on add room event

        var $var1 = '<div id="dropdown2_ ' + (counter) + ' " class="class1"> <div class="wrapadults" style="float:left"> '
        $var1 = $var1 + '<span> <span>      <select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;">      <option value="1">1</option>        <option value="2" selected="selected">2</option>'
        $var1 = $var1 + '<option value="3">3</option>       <option value="4">4</option>        <option value="5">5</option>        <option value="6">6</option>        <option value="7">7</option>'
        $var1 = $var1 + '<option value="8">8</option>       <option value="9">9</option>        <option value="10">10</option>      </select>     </span>       </span>  </div>'
        $var1 = $var1 + '<div class="children" > <span>  <select id="hc_f_children_' + forage + '" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;" onselect="getIdvalue()">'
        $var1 = $var1 + '<option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>'
        $var1 = $var1 + '<option value="4">4</option> </select> </span>  </div> <div id="chileage_'+forage+'" class="ch"></div>  </div>'
        $var1 = $var1 + '<div class="btnrmv" id="' + counter + '" > <a class="removeRoom " style=" width:30px; height:0px; margin:0px;left:200px;position:relative; top:-30px; background-image:none; color:#b11500;font-weight:normal;font-size:0.77em;" href="javascript:void(0);">remove<span></span> </a> </div>';

        $("#Addition").append('<fieldset id="' + counter + '" data-index="' + index + '"' + $var1 + '</fieldset>');

        counter++;
        index++;
        forage++;
        // for remove element
        $(".btnrmv").click(function () {
            $("#roomconfig fieldset#" + this.id).remove();
            counter--;

        });

        var Idvalue = null;
        // Add childage textbox
        function getIdvalue() {
            Idvalue = $('.hc_evt_children').attr("id");


        }

        $(Idvalue).change(function () {

            var index1 = $(".ch input").size();
            var requested = parseInt($(".hc_evt_children").val(), 5);

            if (requested > index1) {
                for (i = index1; i < requested; i++) {
                    var $ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: '' });
                    $("#chileage_" + forage).append($ctrl);
                }
            }
            else if (requested < index1) {
                var x = requested - 1;
                $("#chileage_ input:gt(" + x + ")").remove();
            }
        });


    });
 
    <div class="btnWrap" style="clear:both;border-bottom: 0.5px solid #FFFFFF;">

添加房间     

1 个答案:

答案 0 :(得分:0)

创建标记时,请勿使用onselect属性。它不会开火。

相反,在附加子下拉列表后,将更改事件绑定到下拉列表。 在需要更多房间选择:   $('#hc_f_children')。bind('更改',函数(){//此处为您的代码,添加了这些文本框});

按下添加房间:   $('#hc_f_children _'+ forage).bind('change',function(){//这里的代码,添加了那些文本框});