I have been wrecking my brain trying to get around this issue. I'm having trouble where a Select dropdown list is not being populated with the results returned based on a previous selection.
The relevant HTML code is as follow:
<div class="widget property_search">
<form action="https://www.agentsforbidden.co.za/" id="searchproperty" name="searchproperty" method="get">
<div class="search_frm_left clearfix">
<div class="form_row clearfix advt-ptype">
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Sale" value="Sale" checked= checked><label for="property_type_Sale"> Sale</label></span>
<span class="chkbox"><input type="radio" name="property_type" id="property_type_Rent" value="Rent"><label for="property_type_Rent"> Rent</label></span>
</div> <div class="form_row">
<label>Keyword</label>
<input type="text" value="" name="s" id="search_near-1135114534" class="searchpost" placeholder="" />
</div>
<div class="form_row clearfix">
<label>Province</label> <div class="selectbox">
<select name="adv_zone" id="adv_zone" class="adv_zone">
<option value="">Select province</option>
<option value="5">Eastern Cape</option>
<option value="3">Free State</option>
<option value="6">Gauteng</option>
<option value="2">KwaZulu-Natal</option>
<option value="9">Limpopo</option>
<option value="7">Mpumalanga</option>
<option value="10">North West</option>
<option value="8">Northern Cape</option>
<option value="11">Western Cape</option>
</select>
</div>
</div>
<div class="form_row clearfix">
<label>City</label> <div class="selectbox">
<select name="adv_city" id="adv_city" class="adv_city">
<option value="">Select City</option>
</select>
</div>
</div>
The problem is that when I select the Province that the City drop down list is not getting populated. When I inspect the POST and return values with FireBug I can see that I am getting the response that is required (All the options for the dropdown) however it just simply doesn't get populated.
Here's the relevant jQuery Ajax bit:
jQuery(".adv_zone").live("change", function () {
var e = jQuery(this),
t = e.parents(".form_front_style").find(".adv_city"),
i = jQuery(this).val();
jQuery.ajax({
url: ajaxUrl,
type: "POST",
data: "action=fill_city_cmb&state_id=" + i,
success: function (e) {
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
else {
var i = t.find("option").first();
t.next("span.select").text(i.text())
}
}
})
})
And lastly the response (truncated due to already long post):
<option value="">Select City</option><option value="5651">Akasia</option><option value="5652" >Alberton</option><option value="5653">Albertynsville</option><option value="5654" >Alexandra</option><option value="12694" >Alphen Park</option><option value="5655">Alrapark</option><option value="5656">Alrode</option><option value="5657">Althea</option>
When the ajax is fired I can see that the following part is true and is executed:
if (t.html(e), t.trigger("change"), "" != t.find("option:selected").val()) t.trigger("change");
I would GREATLY appreciate any insight as to why this is not working as expected.
Related
I am trying to add cloning functionality for select boxes.
I have 3 select box: country, state, city and first user select the country and on id basis state select box is populated with options and same with city dropdown will populate only when state is selected.
Then I have add more option where I have regenerate everything. so I am cloning my div but the problem when I change my country instead of showing new state dropdown its returns to previous drop down:
$('.country').on('change',function(){
var id = $(this).val();
callAjax(id);
});
$('.state').on('change',function(){
var id = $(this).val();
callAjax(id);
});
$('#btClone').on('click', function () {
$('#country')
.clone()
.attr('id', 'country_' + i)
.attr('name', 'country_' + i)
.appendTo("#container2");
$('#state')
.clone()
.attr('id', 'state_' + i)
.attr('name', 'state_' + i)
.appendTo("#container2");
i =i+1;
});
My Html looks like
<div id="container1">
<select id="country" name="country" class="hidden country">
</select>
<select id="state" name="state" class="hidden state">
</select>
<select id="city" name="city" class="hidden city">
</select>
<span id="selected-profile"></span>
<div id="addons" class="hidden">
<input type="button" id="btClone" value="Clone the list" style="float:right;" />
</div>
</div>
<div id="container2" style="display:none;"></div>
I want when i click on add new then chose country then change something my ajax call again call but as of now i am unable to do that because i already have options
what exactly do you mean with "instead of showing new state dropdown its returns to previous drop down". I tried your code in a fiddle and it's cloning as expected.
function initRow($row){
$row.find('select[name="country"]').on('change', function () {
var thisRow = $(this).closest('div.row');
var stateDD = thisRow.find($('select[name="state"]'));
stateDD.show();
stateDD.on('change',function(){
var cityDD = thisRow.find('select[name="city"]');
cityDD.show();
cityDD.on('change',function(){
});
});
});
}
$('#container1 .row').each(function(){
initRow($(this));
});
$('#btClone').click(function(){
var rowTemplate = $('#container1 > .row').eq(0).clone();
rowTemplate.find('select[name="state"]').hide();
rowTemplate.find('select[name="city"]').hide();
initRow(rowTemplate.appendTo($('#container1')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1">
<div class="row">
<select name="country" class="hidden country">
<option value=1>country 1</option> <option value=2>country 2</option>
</select>
<select name="state" class="hidden state" style="display:none;">
<option value=1>state 1</option> <option value=2>state 2</option>
</select>
<select name="city" class="hidden city" style="display:none;">
<option value=1>city 1</option> <option value=2>city 2</option>
</select>
</div>
</div>
<input type="button" id="btClone" value="Clone the list" style="float:right;" />
I use selectize.js for dropdown lists in my project. I have 3 dropdown lists related to each other. When I click an option from first dropdown list, some elements from second and third dropdown lists should be disabled. When I click an option from second dropdown list, some elements from third dropdown list should be disabled.
When I try some basic jquery or javascript methods to disable an option from dropdownlists, they don't affect. However, when I delete selectize.js classes from dropdownlists, they immediately affect, disable options that I want.
Here is my sample code for dropdownlists;
<div id="pro_yur_gru" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person</label>
<select id="Person1" class="demo-default" name="PERSONLIST" onchange="my_onchange_function_to_remove_2_and_3()">
<option value="">Select a person...</option>
<option value="4">Albert</option>
<option value="1">Frank</option>
<option value="3">Doug</option>
<option value="5">Arnold</option>
</select>
<script type="text/javascript">
$('#Person1').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
<div id="pro_yur_gru2" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person 2</label>
<select id="Person2" class="demo-default" name="PERSONLIST2" onchange="my_onchange_function_to_remove_3()">
<option value="">Select a person...</option>
<option value="4">Thomas</option>
<option value="1">Mark</option>
<option value="3">Nicholas</option>
<option value="5">James</option>
<option value="6">Matt</option>
<option value="7">Kenny</option>
</select>
<script type="text/javascript">
$('#Person2').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
<div id="pro_yur_gru_3" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person3</label>
<select id="Person3" class="demo-default" name="PERSONLIST3">
<option value="">Select a person...</option>
<option value="1">Chuck</option>
<option value="3">Alex</option>
<option value="2">Donald</option>
<option value="5">John</option>
<option value="7">Dwayne</option>
<option value="6">Kevin</option>
<option value="4">Tim</option>
<option value="8">Patrick</option>
</select>
<script type="text/javascript">
$('#Person3').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
What I need is something like this;
to change <option value="4">Albert</option> to <option disabled value="4">Albert</option> by using a javascript function.
Edit: I use this project on IE10.
Disabled select options can also be achieved by overriding the render function.
$('#control').selectize({
render: {
option: function(item, escape) {
if (item.value === '') {
return '<div style="pointer-events: none; color: #aaa;">' + escape(item.label) + '</div>';
}
return '<div>' + escape(item.label) + '</div>';
}
}
});
Or uses plugin https://github.com/mondorobot/selectize-disable-options
I am new to jQuery and javaScript. I am using bootstrap. I have a select menu that is visible and two additional select menus that are hidden. I would like to show the hidden select menus id the user selects "TV" from the visible select menu options. If they select any of the other value options from the visible select menu, I need to display a simple text box where they can explain. After researching online I attempted to do it using some js, but it is not working. Below is my code and here is my jsfiddle link: https://jsfiddle.net/nx6cc1Lc/
HTML:
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6 hidden">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6 hidden">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
Javascript:
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$("#heard_from_station").removeClass('hidden');
$("#heard_from_provider").removeClass('hidden');
}
else
{
$('#heard_from_station').removeClass().addClass('hidden');
$('#heard_from_provider').removeClass().addClass('hidden');
}
});
});
Update your script as given below.
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
{
$("#heard_from_station").parent().removeClass('hidden');
$("#heard_from_provider").parent().removeClass('hidden');
}
else
{
$('#heard_from_station').parent().addClass('hidden');
$('#heard_from_provider').parent().addClass('hidden');
}
});
});
As your html contains "hidden" class on the parent element ".parent()", you need to add / remove class on the parent. Alternatively, you can also give ID to the parent elements and use those ids directly in your script, without using ".parent()".
Just use show() and hide() of jquery for this.Below is the code part for your issue
<script src="jquery.min.js"></script>
<script src="sample.js"></script>
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6" style="display:none">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6" style="display:none">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
<script> $(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$(".selects-5").show();
$(".selects-6").show();
}
else
{
$('.selects-5').hide();
$('.selects-6').hide();
}
});
});</script>
The problem is that the div tags that contain your secondary select menus are hidden, not the select menus themselves -- even so, your script is trying to remove the class from the select menus. So there are a number of ways you can fix this.
One way to fix this is to apply the hidden class to your select menus instead of your div tags.
<div class="selects-5 col-xs-6">
<select id="heard_from_station" class="form-control selectStation hidden" name="heard_from_station">
...
</select>
</div>
<div class="selects-6 col-xs-6">
<select id="heard_from_provider" class="form-control selectProvider hidden" name="heard_from_provider">
...
</select>
</div>
How would I be able to display select menu when someone select the value option in style id? Code is like this.
HTML :
<div class="row">
<select name="style" id="style">
<option value="banner"></option>
<option value="text"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="language" id="language" style="display:none;">
<option value="EN"></option>
<option value="ES"></option>
<option value="FR"></option>
</select>
</div>
<div class="row">
<select name="english" id="english" style="display:none;">
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="spanish" id="spanish" style="display:none;">
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="french" id="french" style="display:none;" >
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
SCRIPT :
$('#style').change(function(){
selection = $(this).val();
switch(selection)
{
case 'text':
$('#language').show();
break;
default:
$('#language').hide();
break;
}
});
$('#language').change(function(){
selection = $(this).val();
switch(selection)
{
case 'EN':
$('#english').show();
break;
default:
$('#english').hide();
break;
}
});
i want select text value i get language choice when i select language i get anther select menu
You are using the id selector $('#language') and your selects have no ids. You should give ids to each of your selects or use the attribute-equals selector $('[name="language"]') instead.
Try changing
selection = $(this).val();
to
selection = $('#style option:selected').val();
I have tried the following code to load second drop down based on first drop down and it works fine. But the second drop down not clearing its content while I am selecting first drop down second time. It is appending values.
Also the value of option of the second drop down should be "json_data[i].value". But for me it is "json_data[i].text"
Here is the code that I have used in the click of first drop down.
$.ajax({
url: "http://foo.bar/data.json",
type: "POST",
data: {
article: produkt,
color: farbe,
size: groesse,
form: typ
}
}).done(function (data) {
var json_data = $.parseJSON(data.responseText.trim());
for(var i=0;i<json_data.length;i++) {
json_data[i].text = json_data[i].NAME;
json_data[i].value = json_data[i].VALUE;
oHandler2.add(json_data[i]);//adding
}
oHandler2.showRows(json_data.length);
});
Below is my html part,
<span class="field_outer">
<label>Main Category</label>
<div class="filter">
<select id="main_category" name="main_category" class="ddTitle select" onchange="">
<option value="0" selected>Select a main category</option>
<option value="1">category1</option>
<option value="2">category2</option>
</select>
</div>
</span><!-- /.field_outer -->
<span class="field_outer">
<label>Sub Category</label>
<div class="filter">
<select id="sub_category" name="sub_category" class="select" onchange="">
<option value="0" selected>Select a sub category</option>
</select>
</div>
</span>
Please help; Thanks in advance :-)
destroy - Restore the original dorpdown.
var oDropdown = $("#element").msDropdown().data("dd");
oDropdown.destroy()
refresh - Refresh the msdropdown UI and value based on original dropdown.
var oDropdown = $("#element").msDropdown().data("dd");
oDropdown.refresh(); //or
document.getElmentById("element").refresh();
For details check -
http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html