Question

我正在尝试创建动态选择选项，其中选择选项值选择填充动态选择选项。例如，如果用户选择3，结果它应该创建3另外一个额外的选择选项你可以通过以下这个url图像看到代表有房间

$(document).ready(function(){
 $("#ddTest").change(function(){          
     var value = $("#ddTest option:selected").val();
     if (value === '') return;
     var theDiv = $(".is" + value);
     //displays the selected option div
     theDiv.slideDown().removeClass("hidden");
     //disbales the selected option
     $("#ddTest option:selected").attr('disabled','disabled');
     $(this).val('');
 });   
 $("div a.remove").click(function () { 
     var value = $(this).attr('rel');
     var theDiv = $(".is" + value);
     //enables the disabled option
     $("#ddTest option[value=" + value + "]").removeAttr('disabled');
     //hides the selected option div
     $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
 });
});


    <div class="selectContainer">
        <select id="ddTest">
            <option value="">- Select Option-</option>
            <option value="Option1">Option 1</option>
            <option value="Option2">Option 2</option>
            <option value="Option3">Option 3</option>
        </select>
    </div>
    <div class="hidden isOption1">Option 1 <a href="#" class="remove" rel="Option1">remove</a></div>
    <div class="hidden isOption2">Option 2 <a href="#" class="remove" rel="Option2">remove</a></div>
    <div class="hidden isOption3">Option 3 <a href="#" class="remove" rel="Option3">remove</a></div>

输出可能应该代表您可以看到房间下拉列表填充选择选项的数量您可以在此图像中看到

请关注js fiddle https://jsfiddle.net/cubo/2m9351ev/

这不是我期待的实际输出，而且我期待输出在Ex之前我已经知道了：如果用户选择3个房间，它应该填充3个另外的选择选项就像图片一样。

Answer 1

好的，这是一个快速而肮脏的例子。根据您的需要进行修改。我稍后会在有时间的时候添加代码说明。

＆＃13;

$(function() {
    
    var $eachRoomContainer = $("#select-guests");
    var $eachRoomHidden = $("#guests-each-room-hidden");
    var $eachRoomSelects = $eachRoomHidden.find(" > .guests-each-room");
    
    $("#ddTest").change(function() {    
        var rooms = parseInt($(this).val(), 10) || 0,
        	$allEachRooms = $eachRoomContainer.find(".guests-each-room"),
        	totalEachRoooms = $allEachRooms.length,
        	$temp = $();
		
        $allEachRooms.show();
        if (totalEachRoooms > rooms) {
			$allEachRooms.filter(function() {
            	return $(this).index() >= rooms;
            }).hide();
        }
        
		var deltaRooms = totalEachRoooms >= rooms && 0 || (rooms - totalEachRoooms);
        for (var i=0; i<deltaRooms; i++) {
            $temp = $temp.add($eachRoomSelects.clone());
        }
		$eachRoomContainer.append($temp);
    });
});

＆＃13;

#guests-each-room-hidden { display: none; }
.guests-each-room { margin: 10px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-total-rooms">
    <select id="ddTest">
        <option value="0">Select Rooms</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <div id="guests-each-room-hidden">
        <div class="guests-each-room">
            <select class="room-adults">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <select class="room-children">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
    </div>
</div>
<div id="select-guests"></div>

＆＃13;

HTML select选项应根据所选值

1 个答案: