下拉選擇不改變值

我已經創建了一個下拉列表，我已經使用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

下拉選擇不改變值

回答

相關問題