javascript - 下拉选择不改变值

Question

我创建了一个下拉列表，我在选择时使用 ul li 创建了它，它将更改第二个选择栏的值，现在问题是当第二个选择栏的值发生更改时，选择栏不适用于谁能帮我解决这个问题。

假设如果用户没有在第一个选项中做出任何选择并且他选择了卧室，那么它工作得很好但是当用户试图从公寓或办公室更改选择时第二个选择栏中的值将被更改并且当值更改后用户无法在第二个字段中进行选择是有道理的，如果您可以查看并进行选择，我不会很好地解释您会理解我的问题，有人可以帮助我解决这个问题吗？

$(document).ready(function() {
    $('.mc-select').on('click', function() {
	    $('.mc-options', this).toggle();
    });
});

$('.htype_opt').on('click', function() {
	var mc_val = $(this).attr('data-type');
	$('#htype').text(mc_val);
	$('.htype').val(mc_val);
	
	if(mc_val == 'Condo') {
		$('.dt_bed_ch').text('Studio');
		var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="0">Studio</li><li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li>';
		$('.dt_bed').html(new_ul_data);
	}
	
	if(mc_val == 'House') {
		$('.dt_bed_ch').text('1 Bedroom');
		var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li>';
		$('.dt_bed').html(new_ul_data);
	}
	
	if(mc_val == 'Office') {
		$('.dt_bed_ch').text('Open space');
		var new_ul_data = '<li class="mc-option bedroom_opt" data-bedroom="0">Open space</li><li class="mc-option bedroom_opt" data-bedroom="1">1 Room</li><li class="mc-option bedroom_opt" data-bedroom="2">2 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="3">3 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="4">4 Rooms</li><li class="mc-option bedroom_opt" data-bedroom="5">5 Rooms</li>';
		$('.dt_bed').html(new_ul_data);
	}
	
	var type 	 = mc_val;
	var city 	 = $('.city').val();
	var bedroom  = $('.bedroom').val();
	var bathroom = $('.bathroom').val();
	var area 	 = $('.area').val();
	var pkg 	 = $('.pkg').val();
	
	$.ajax({
		type 	 : "POST",
		url  	 : "http://bluevisionarydesigns.com/demo/unick/home/get_data",
		dataType : "text",
		data	 : {city: city, type : mc_val, bedroom : bedroom, bathroom : bathroom, area : area, pkg : pkg},
		success	 : function(data) {
			$('.estimate-amount').text(data);
		}
	});
});

$('.bedroom_opt').on('click', function() {
	var mc_val  = $(this).attr('data-bedroom');
	var mc_val2 = $(this).text();
	$('#bedroom').text(mc_val2);
	$('.bedroom').val(mc_val);
	
	alert(mc_val);
	var type 	 = $('.htype').val();
	var city 	 = $('.city').val();
	var bedroom  = mc_val;
	var bathroom = $('.bathroom').val();
	var area 	 = $('.area').val();
	var pkg 	 = $('.pkg').val();
	
	$.ajax({
		type 	 : "POST",
		url  	 : "http://bluevisionarydesigns.com/demo/unick/home/get_data",
		dataType : "text",
		data	 : {city: city, type : type, bedroom : mc_val, bathroom : bathroom, area : area, pkg : pkg},
		success	 : function(data) {
			$('.estimate-amount').text(data);
		}
	});
});

.search-bar form .input-group .mc-select {
    position: relative;
}

.mc-select {
    min-width: 100px;
    float:left;
    border: 1px solid #dce1e5;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    background-color:#fff;
}

.mc-select .mc-value {
    height: 62px;
    line-height: 62px;
    padding: 0 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-select .mc-options {
    height: auto;
    position: absolute;
    width: calc(100% + 2px);
    -webkit-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1);
    -moz-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1);
    -ms-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1);
    -o-transition: height 350ms 0s cubic-bezier(.165,.84,.44,1);
    transition: height 350ms 0s cubic-bezier(.165,.84,.44,1);
    -webkit-transform: translateX(-1px);
    -moz-transform: translateX(-1px);
    -ms-transform: translateX(-1px);
    -o-transform: translateX(-1px);
    transform: translateX(-1px);
    background-color: rgba(255, 255, 255, 0.8);
    border-left: 0 solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 0 solid transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display:none;
    z-index: 9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="search-bar">
<form method="POST">
			<!-- =========================================================== -->
			<div class="input-group ">
				<div class="mc-select">
					<div class="mc-value" id="htype">Condo</div>
					<ul class="mc-options">
						<li class="mc-option htype_opt" data-type="Condo">Condo</li>
						<li class="mc-option htype_opt" data-type="House">House</li>
						<li class="mc-option htype_opt" data-type="Office">Office</li>
					</ul>
				</div>
				<input type="hidden" name="htype" class="htype" value="Condo" />
			</div> <!-- End of input Group -->
			
			<!-- =========================================================== -->
			<div class="input-group ">
				<div class="mc-select">
					<div class="mc-value dt_bed_ch" id="bedroom">Studio</div>
					<ul class="mc-options dt_bed">
						<li class="mc-option bedroom_opt" data-bedroom="0">Studio</li>
						<li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li>
						<li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li>
						<li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li>
						<li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li>
						<li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li>
					</ul>
				</div>
				<input type="hidden" name="bedroom" class="bedroom" value="0" />
			</div> <!-- End of input Group -->
      </form>
      </div>

Answer 1

当您更改第一个下拉列表中的选择时，您正在创建全新的 <li>第二个下拉列表中的元素。这些元素没有绑定(bind)任何“点击”事件，因此当用户选择它们时，没有任何反应。

这是因为运行代码时元素不存在:

$('.bedroom_opt').on('click', function() {
...

将点击事件处理程序附加到所有现有的 <li> bedroom_opt 类的元素。

要解决这个问题，您可以使用事件委托(delegate):

$('.dt_bed').on('click', '.bedroom_opt', function() {

这会将事件处理程序附加到始终存在的 dt_bed 元素，然后将发生在其上的任何点击事件委托(delegate)给它下面的指定元素(在本例中为具有 bedroom_opt 类的元素)，它会执行此操作每当事件被处理时动态地处理，因此它可以处理随时添加的元素。

有关详细信息，请参阅 http://api.jquery.com/on/并阅读标题为“直接和委托(delegate)事件”的部分