下拉选择不改变值

我已经创建了一个下拉列表，我已经使用ul li创建了一个下拉列表，它将改变第二个选择列的值，现在的问题是，当第二个选择列的值被改变时，选择酒吧不适合我，任何人都可以帮助我解决这个问题。下拉选择不改变值

让我们假设用户在第一个选项中没有做出任何选择，并且他选择了卧室，但是当用户试图改变从公寓房屋或办公室的选择时，第二个选择栏中的值将被更改，价值被改变，那么用户无法在第二个领域做出选择是有道理的我不善于解释你是否可以看看并做出选择，你会理解我的问题，任何人都可以帮助我解决这个问题吗？

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

 
$('.htype_opt').on('click', function() { 
 
\t var mc_val = $(this).attr('data-type'); 
 
\t $('#htype').text(mc_val); 
 
\t $('.htype').val(mc_val); 
 
\t 
 
\t if(mc_val == 'Condo') { 
 
\t \t $('.dt_bed_ch').text('Studio'); 
 
\t \t 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>'; 
 
\t \t $('.dt_bed').html(new_ul_data); 
 
\t } 
 
\t 
 
\t if(mc_val == 'House') { 
 
\t \t $('.dt_bed_ch').text('1 Bedroom'); 
 
\t \t 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>'; 
 
\t \t $('.dt_bed').html(new_ul_data); 
 
\t } 
 
\t 
 
\t if(mc_val == 'Office') { 
 
\t \t $('.dt_bed_ch').text('Open space'); 
 
\t \t 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>'; 
 
\t \t $('.dt_bed').html(new_ul_data); 
 
\t } 
 
\t 
 
\t var type \t = mc_val; 
 
\t var city \t = $('.city').val(); 
 
\t var bedroom = $('.bedroom').val(); 
 
\t var bathroom = $('.bathroom').val(); 
 
\t var area \t = $('.area').val(); 
 
\t var pkg \t = $('.pkg').val(); 
 
\t 
 
\t $.ajax({ 
 
\t \t type \t : "POST", 
 
\t \t url \t : "http://bluevisionarydesigns.com/demo/unick/home/get_data", 
 
\t \t dataType : "text", 
 
\t \t data \t : {city: city, type : mc_val, bedroom : bedroom, bathroom : bathroom, area : area, pkg : pkg}, 
 
\t \t success \t : function(data) { 
 
\t \t \t $('.estimate-amount').text(data); 
 
\t \t } 
 
\t }); 
 
}); 
 

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

.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"> 
 
\t \t \t <!-- =========================================================== --> 
 
\t \t \t <div class="input-group "> 
 
\t \t \t \t <div class="mc-select"> 
 
\t \t \t \t \t <div class="mc-value" id="htype">Condo</div> 
 
\t \t \t \t \t <ul class="mc-options"> 
 
\t \t \t \t \t \t <li class="mc-option htype_opt" data-type="Condo">Condo</li> 
 
\t \t \t \t \t \t <li class="mc-option htype_opt" data-type="House">House</li> 
 
\t \t \t \t \t \t <li class="mc-option htype_opt" data-type="Office">Office</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <input type="hidden" name="htype" class="htype" value="Condo" /> 
 
\t \t \t </div> <!-- End of input Group --> 
 
\t \t \t 
 
\t \t \t <!-- =========================================================== --> 
 
\t \t \t <div class="input-group "> 
 
\t \t \t \t <div class="mc-select"> 
 
\t \t \t \t \t <div class="mc-value dt_bed_ch" id="bedroom">Studio</div> 
 
\t \t \t \t \t <ul class="mc-options dt_bed"> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="0">Studio</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="1">1 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="2">2 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="3">3 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="4">4 Bedroom</li> 
 
\t \t \t \t \t \t <li class="mc-option bedroom_opt" data-bedroom="5">5 Bedroom</li> 
 
\t \t \t \t \t </ul> 
 
\t \t \t \t </div> 
 
\t \t \t \t <input type="hidden" name="bedroom" class="bedroom" value="0" /> 
 
\t \t \t </div> <!-- End of input Group --> 
 
     </form> 
 
     </div>

来源

2017-08-15 Usman Khan

当你在第一个下拉更改选择，你要创建品牌，在第二个下拉新<li>元素。这些元素没有任何绑定到它们的“点击”事件，所以当用户选择它们时，什么都不会发生。

这是因为当你运行该代码不存在的元素：

$('.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/和阅读题为“直接和委托的事件”一节

来源

2017-08-15 15:32:51 ADyson

伟大的人感谢很多 –

这使得调试更加困难，因为'click'处理程序不会显示为''上的事件侦听器。bedroom_opt'元素。 – ryanpcmcquen

@ryanpcmcquen有趣的观点，如果这是真的我没有想到这一点。这是非常常见的做法，但jQuery有很好的文档记录，当然如果您愿意，也可以不使用jQuery。它似乎并没有让人们使用它！ – ADyson

非常接近，只需要你附加的事件侦听.bedroom_opt您生成的HTML后：

$(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）。将事件附加到它旨在使得调试更容易，因为它显示侦听器附加到开发工具内的元素。

来源

2017-08-15 15:35:14 ryanpcmcquen

它可以工作，但事件委派比整洁的方法更简洁和不冗长。知道哪个性能更好会很有趣。 – ADyson

@ADyson，几乎没有冗长！他们的字符数量几乎相同。这有助于开发人员理解代码的顺序，并在开发工具下显示'click'事件监听器。将它附加到文档中会创建另一层间接寻址，并且会影响将来的调试。 – ryanpcmcquen

我的意思是在执行的命令较少的意义上较为冗长，而不是字面字符计数（这只可能是类似的，因为jquery恰好支持方法链接） – ADyson

一个经验法则，只要你有绑定任何事件到进来未来在DOM中的任何元素，I，E，不可用的时候点击或任何事件绑定，那么你应该将其绑定使用下面的methd。

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

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

来源

2017-08-15 15:38:32

我认为这是一个更好的解决方案，使用ASP.NET UpdatePanels。 – Si8

下拉选择不改变值

回答

相关问题