下拉列表选择不更改值

Question

我创建了一个下拉列表，我在选择时使用ul li创建了下拉列表，它将更改第二个选择栏的值，现在问题是当第二个选择栏的值发生变化时，选择栏不起作用我可以帮助我解决这个问题。

假设用户没有在第一个选项中做出任何选择并且他选择卧室它正在完美地工作但是当用户试图从公寓房或办公室改变选择时，第二选择栏中的值将被改变并且当值更改然后用户无法在第二个字段中进行选择有意义我不善于解释如果你可以查看并做出选择你会理解我的问题任何人都可以帮助我解决这个问题吗？

＆＃13;

＆＃13;

$(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);
		}
	});
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

当您在第一个下拉列表中更改选择时，您将在第二个下拉列表中创建全新的<li>元素。这些元素没有任何＆＃34;点击＆＃34;事件绑定到它们，所以当用户选择它们时，没有任何反应。

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

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

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

为了解决这个问题，您可以使用事件委派：

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

这会将事件处理程序附加到dt_bed元素，该元素始终存在，但随后会将其上发生的任何单击事件委托给它下面的指定元素（在本例中为带有bedroom_opt类的元素），并执行此操作在处理事件时动态处理，因此它可以随时处理添加的元素。

有关详细信息，请参阅http://api.jquery.com/on/并阅读标题为＆＃34;直接和委派活动＆＃34;

的部分

Answer 2

您非常接近，只需在为其生成HTML后附加.bedroom_opt的事件侦听器：

$(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').off('click').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>

请注意，您必须使用.off('click')删除所有以前的事件侦听器。还有其他方法可以做到这一点，但我宁愿避免将侦听器附加到它们不适合的项目（如附加到document）。将事件附加到项目上可以使调试更容易，因为它将监听器显示为附加到开发工具内部的元素。

Answer 3

一个拇指规则，每当您必须将任何事件绑定到DOM中的将来中的任何元素时，i，e，当时点击或不可用任何事件都是绑定，那么你应该使用下面的methd绑定它。

$("body").on('click', 'selector',callback);

In your case $("body").on('click', '.bedroom_opt',function(){...});