Update Select Menu based off another Selection - javascript

I have a list of states (USA) that includes Canadian provinces,
<select>
<optgroup label="United States">
<option value="AL">Alabama (AL)</option><option value="AK">Alaska (AK)</option><option value="AE">APO state (AE)</option><option value="AO">APO state (AO)</option><option value="AP">APO state (AP)</option><option value="AZ">Arizona (AZ)</option>
</optgroup>
<optgroup label="Canada">
<option value="AB">Alberta (AB)</option><option value="BC">British Columbia (BC)</option><option value="MB">Manitoba (MB)</option><option value="NB">New Brunswick (NB)</option><option value="NL">Newfoundland and Labrador (NL)</option></optgroup>
</select>
Then I have another select menu that includes 2 options, USA & Canada. (USA is default selected)
I want that if Canadian province is selected, disable USA as country in second select menu. and if Canada is selected in second select menu, remove USA states from first select menu.
I only found ways to populate the second select menu after choosing the first (like this http://jsfiddle.net/FK7ga/), but what I try is to show all by default, and update after selecting either one.

You can do something like this:
$("#filter").on("change", function() {
$states = $("#states");
$states.find("optgroup").hide().children().hide();
$states.find("optgroup[label='" + this.value + "']").show().children().show();
$states.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
});
See this working DEMO

#letiagoalves:
I've just edited your fiddle by changing show/hide to attr('disable','disable'); and removeAttr('disable'); This causes the list to stay, but prevent the wrong state group to get selected.
Just my 2 cents.

Was able to make it work as I wanted, with the help of #letiagoalves, Below is the code
$("#countries").on("change", function ()
{
if ($("#countries").find(":selected").val())
{
$states = $("#states");
$states.find("optgroup").hide().children().hide();
$states.find("optgroup[label='" + this.value + "']").show().children().show();
$states.find("optgroup[label='" + this.value + "'] option").eq(0).prop("selected", true);
}
else
{
$states.show().children().show().children().show();
}
});
$("#states").on("change", function () {
$countries = $("#countries");
if ($("#states").find("option:selected"))
{
var c = $("#states").find("option:selected").parent().attr("label");
$countries.find("option[value='" + c + "']").prop("selected", true);
$("#countries").change();
}
});
Still trying to make it work with #Alex-Amthor's idea of disable, will update answer if I succeed. meanwhile here is a demo on jsfiddle

Related

Remove and add values from dropdown using javascript/jQuery

I am trying to achieve the following thing in my code but it is getting complicated.
I have 'n' dropdowns with or without duplicate values in it.
for simplicity lets assume following scenario:
dropdown1:
<select>
<option>100</option>
<option>200</option>
<option>102</option>
</select>
dropdown 2:
<select>
<option>100</option>
<option>200</option>
<option>201</option>
</select>
dropdown3 :
<select>
<option>100</option>
<option>300</option>
<option>301</option>
</select>
case1:
if user select value 100 from dropdown 1 then 100 should be removed from all the dropdowns.and when user change dropdown 1 value from 100 to 200 then 100 should be added back to all the dropdowns and 200 should be removed from all the dropdowns.
removing seems easy but adding back values is little difficult.
how can I maintain a list or some other data structure to remember which value to add and where incase of multiple value change? is there any advance jquery feature or generic javacript logic i can use ?
If it is sufficient to just disable the option instead of actually removing it, the following could work for you. You might want to adapt the handling of the selects when initially loading the site.
$('select option[value="' + $('select').eq(0).val() + '"]').not(':eq(0)').prop('disabled', true);
$('select').on('change', function() {
var val = $(this).val();
$('select option').prop('disabled', false);
$('select option[value="' + val + '"]').not($(this)).prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='102'>102</option>
</select>
<select>
<option value='100'>100</option>
<option value='200'>200</option>
<option value='201'>201</option>
</select>
<select>
<option value='100'>100</option>
<option value='300'>300</option>
<option value='301'>301</option>
</select>
It would be better to set display to none instead. Hence, you will avoid the complications of adding or removing in the appropriate order.
So, you can easily return them visible.
$( "option" ).each(function( index ) {
$(this).css("display", "");
});
$("#drop").change(function () {
var selected_value=$(this).val();
var dropdown=$(select);
for(i=0;i<dropdown.length;i++){
$("dropdown[i] option[value=selected_value]").remove();
}
});
Set id of first dropdown="drop"
Here select the value and define it S a variable loop through dropdown with in page remove option when value=selected_value

How to I modify the code to apply it for three drop-downs? (Jquery)

I have a jquery code which changes according to the previously selected value of drop-down.
I use it when I have two drop-downs and it works flawlessly.
Now the problem is that I am working with 3 drop-downs and I am unable to modify the code according to 3 drop-downs (reason my being new to jquery).
This is the code:
Jquery:
jQuery(function(){
var $cat = $('select[name=coursename]'),
$items = $('select[name=semno]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);});});
I used two drop-downs namely, coursename and semno, with this code and it works perfectly fine.
Now I want to add another dropdown, subnm which comes after semno.
So what I exactly want is that when a person makes a particular selection in coursename the relevant items should appear in semno and among those relevant items, when a value is selected, the items are listed on subnm accordingly.
I have used rel and class in the option element.
HTML Code
Course:
<select name="coursename" id="coursename">
<option value="xyz" rel="xyz">XYZ</option>
<option value="abc" rel="abc">ABC</option>
</select>
Semester:
<select name="semno" id="sem">
<option value="one" class="xyz">I</option>
<option value="two" class="xyz">II</option>
<option value="three" class="abc">III</option>
</select>
Subject:
<select name="subnm" id="subnm">
<option value="p">p</option>
<option value="q">q</option>
<option value="r">r</option>
</select>
I guess I will need a rel option on the semno drop-down and then class on the subnm drop-down in accordance to the semno rel.
Forgive me if I am not 100% comprehensible. I am new to this site and I really need help.
Thank You in advance!
Hope this is what you want. I have used the same function for change event for the second select menu.
$items.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $third.find('option.' + rel);
if ($set.size() < 0) {
$third.hide();
return;
}
$third.show().find('option').hide();
$set.show().first().prop('selected', true);
});
Also I have triggered the change event for second select in change event handler of first select.
$items.trigger("change");
Please refer this fiddle

How to have the current selected value option under dropdown in tablepress?

I would like to know how to have the selected option value under dropdown after selecting it, because whenever I'm selecting any option, it gets deleted and comes beneath the dropdown option with a link. When you click it, it is going back to the dropdown menu. Code before selection
<div class="column-filter-widget">
<select class="widget-0">
<option value="">Healthy Life</option>
<option value="Fruit">Fruit</option>
<option value="Vegetable">Vegetable</option>
<option value="Beef">Beef</option>
</select>
HTML Code after selecting option as "Fruit"
<div class="column-filter-widget">
<select class="widget-0">
<option value="">Healthy Life</option>
<option value="Vegetable">Vegetable</option>
<option value="Beef">Beef</option>
</select><a class="filter-term filter-term-fruit" href="#">Fruit</a>
</div>
Css Code:
.column-filter-widgets a.filter-term:hover {text-decoration: line-through!important;}
Here is the javasript file Click here to check javascript file. I know there are many threads similar to that but since this problem is for Wordpress Plugin tablepress datatables column filter widgets and it's under javascript file which I don't know how to solve. I'm sure the problem can easily be solved after looking at the above link.
Thanks
Try this, i'm assuming this what you were after from what i read, here's a JS Fiddle to show you http://jsfiddle.net/7a38ast6/7/
JQuery
var optionvalue = 0;
var optionvalueclass = ""
$('select.widget-0').change(function(){
optionvalue = $('option:selected', this).text();
optionvalue = optionvalue.replace(" ", "-");
optionvalueclass = optionvalue.toLowerCase();
$(".widget-0").after('<a class="filter-term filter-term-' + optionvalueclass + '" href="#">' + optionvalue + '</a>');
$('option:selected', this).remove();
});

Dynamic country states dropdown menu

Hey I'm trying to create a form with a dropdown menu containing states are automatically filtered based on selected country. That is, only show the states of the selected country
JQuery
$("#shipment_sender_attributes_state_code").parent().hide()
$('#shipment_sender_attributes_country_code').change(function() {
states = $("#shipment_sender_attributes_state_code").html()
country = $('#shipment_sender_attributes_country_code :selected').val()
options = $(states).filter("optgroup[label='" + country + "']").html()
$states = $('#shipment_sender_attributes_state_code')
if (options) {
$states.html(options)
$states.parent().show()
} else {
$states.empty()
$states.parent().hide()
}
})
It works the first time I select a country, but if I select another, and then go back, the states variable remains empty and no drop down is shown. Any advice?
Form:
<optgroup label="us">
<option value="AA">Armed Forces Americas (AA)</option>
<option value="AE">Armed Forces Europe (AE)</option>
<option value="AK">Alaska (AK)</option>
<option value="AL">Alabama (AL)</option>
<option value="AP">Armed Forces Pacific (AP)</option>
<option value="AR">Arkansas (AR)</option>
....
<optgroup label="ca"><option value="AB">Alberta (AB)</option>
<option value="BC">British Columbia (BC)</option>
<option value="MB">Manitoba (MB)</option>
<option value="NB">New Brunswick (NB)</option>
<option value="NL">Newfoundland and Labrador (NL)</option>
....
EDIT JSfiddle
Can't quite get the fiddle working, but it's something like this
http://jsfiddle.net/d6cm5v6g/2/
Use var to declare your variables.
var states...
var country...
var options...
If you don't do that you are creating global variables
You need to do a minor change to your code:
$(function(){
$("#shipment_sender_attributes_state_code").parent().hide()
var states = $("#shipment_sender_attributes_state_code").html()
$('#shipment_sender_attributes_country_code').change(function() {
var country = $('#shipment_sender_attributes_country_code :selected').val()
var options = $(states).filter("optgroup[label='" + country + "']").html()
var $states = $('#shipment_sender_attributes_state_code')
if (options) {
$states.html(options)
$states.parent().show()
}
else {
$states.empty()
$states.parent().hide()
}
})
});
You need to move states outside the change function because in your else you do this $states.empty(), so the next time there is no html to filter(all options and optgroups are gone). This way you store the original value in an object.
I change the Afganistan value to "ca" in order for testing purposes(you can switch between Afganistan and United States)
Working fiddle:http://jsfiddle.net/robertrozas/4vxjpjLv/2/

Showing and hiding <option> with jquery

I have three selects (html drop down lists), all contain the exact same values (except the ids of selects are different).
Now I want to do this:
When a user selects some option in the first select the same option is hidden in the other two. This rule applies to other two selects as well.
If the option in the second select is changed again then the previously selected option must reappear in the other selects.
I hope I was clear. I know this should probably be solved with javascript but I don't have enough knowledge of it to write an elegant solution (mine would probably be very long). Can you help me with the this?
$('#selectboxid').hide();
is the simplest way
http://api.jquery.com/hide/
try toggle it it matches your requirement
http://api.jquery.com/toggle/
you can call these onchange of the select box
if you want to hide individual options
use .addClass and add class to that option to hide it
http://api.jquery.com/addClass/
Little late the party, but here's a full working solution:
HTML:
<select>
<option value="Fred">Fred</option>
<option value="Jim">Jim</option>
<option value="Sally">Sally</option>
</select>
<select>
<option value="Fred">Fred</option>
<option value="Jim">Jim</option>
<option value="Sally">Sally</option>
</select>
<select>
<option value="Fred">Fred</option>
<option value="Jim">Jim</option>
<option value="Sally">Sally</option>
</select>
JavaScript:
$(document).ready(function() {
$("select").change(function() {
var $this = $(this);
var selected = this.options[this.selectedIndex].value;
var index = $this.index();
$("select").each(function() {
var $this2 = $(this);
if($this2.index() != index) {
$(this.options).show();
var $op = $this2.children("option:[value='" + selected + "']");
$op.hide();
if($this2.val() == selected) {
if($op.index() + 1 == $ops.length) {
$this2.val($ops.eq(0).val());
}
else {
$this2.val($ops.eq($op.index() + 1).val());
}
}
}
});
});
});
Also demonstrated here: http://jsfiddle.net/thomas4g/u2sbd/21/

Categories

Resources