Usman Khan
Reputation: 179
dropdown selection not changing values
I have created a drop down which I have created using ul li on selection it will be changing values of the second selection bar now the problem is that when the values of second selection bar is changed then the selection bar is not working for me can anyone help me out with this concern.
let suppose if a user does not make any selection within first option and he selects bedrooms it is working perfectly but when ever user tries to change selection from condo house or office the values in second selection bar will be changed and when the values are changed then user is unable to make selection in the second field make sense I am not good in explaining if you can look and make selection you will understand my question can any one would be able to help me out with this concern ?
$(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>Upvotes: 0
Views: 65
Answers (3)
ryanpcmcquen
Reputation: 6475
You were very close, just needed to attach the event listener for .bedroom_opt after you generate the HTML for it:
$(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>Note that you have to remove all previous event listeners using .off('click'). There are other ways to do this, but I would rather avoid attaching listeners to items they are not intended for (as in attaching to document). Attaching the event to the item it is intended for makes debugging easier, because it shows the listener as attached to the element inside of dev tools.
Upvotes: 1
amit wadhwani
Reputation: 1140
One thumb rule, Whenever you have to bind any event to any element which comes in future in the DOM, i,e, Not available at the time click or any event is bind then you should bind it using below methd.
$("body").on('click', 'selector',callback);
In your case $("body").on('click', '.bedroom_opt',function(){...});
Upvotes: 1
ADyson
Reputation: 62059
When you change the selection in the first dropdown, you're creating brand new <li> elements in the second dropdown. These elements do not have any "click" event bound to them, so when the user selects them, nothing happens.
This is because the elements did not exist when you ran the code:
$('.bedroom_opt').on('click', function() {
...
which attached the click event handler to all the existing <li> elements with the bedroom_opt class.
To get round this, you can use event delegation:
$('.dt_bed').on('click', '.bedroom_opt', function() {
This attaches the event handler to the dt_bed element, which always exists, but then delegates any click events which occur on it down to the specified elements below it (in this case, elements with the bedroom_opt class), and it does this dynamically whenever the event is handled, so it can cope with elements added at any time.
For more info, see http://api.jquery.com/on/ and read the section entitled "Direct and delegated events"
Upvotes: 2
Related Questions
- Can't change HTML dropdown list value
- Dropdown Value change if I selected the 1st Dropdown
- Change dropdown option value via JS not working
- Select dropdown option value not getting affected until it changes
- HTML <select> JQuery .change not working
- Trying to update the DOM with dropdown select
- Jquery drop down changing value
- Class not changing when dropdown value is selected with JQuery
- Drop down selection changes
- Why isn't drop down changing based on other value?