Dropdown Options remove from other dropdowns - javascript

I need to remove some options from the 2nd dropdown menu based on the first.
I have tried quite a few iterations to get it done but still it is not working.
Kindly provide with solutions
In the below code I need to remove the option from the 2nd dropdown already selected in the 1st one.
I have tried the mentioned HTML & Javascript Code
HTML
<form>
Source:
<select id = "box1" name="a">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
</select>
Destination:
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
</form>
JAVASCRIPT
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value='a']").remove();
});
}
$(document).ready(main);
I have tried entering the value as variable a with and without quotes but no effect. Although when i replaced 'a' with a specific value like 'Apple', then the code is working.

I think this is your answer ;)
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value="+a+"]").hide().siblings().show();
});
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="box1" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>

Hi kindly check https://jsfiddle.net/RRR0308/uubuumrz/1/
HTML
<select id="box1">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<select id="box2">
<option>999</option>
<option>222</option>
<option>888</option>
<option>444</option>
</select>
jQuery
$(document).ready(function(){
$('#box1').on('change', function(){
var x=$(this).val();
$('#box2 option').each(function(){
if($(this).val()==x){
$(this).remove();
}
});
});
});

hide().siblings().show()
instead of.remove()`
The .remove() permanently removes the selected option in box1 from box2. so if you use .hide() and .show(), it would hide and show. try making these changes.

$('#box1').change(function(){
var v = $(this).val();
$('#box2').find("option[value="+v+"]").remove(); });
Try this simple one

Related

using jQuery to get selected value from form

I have a form that has a select field defined like this
The myName[] is like that because there are several repetitions in the sign-up form (the user first defines how many he wants to enter, and then that many forms are generated)
Now I would like to get the selected value using jQuery whenever somethign is selected, but as expected, it won't work: it's trying to get the info from an id, and there's more than one of this id. The result is that it's always getting the content of the first select field with the id it finds. I tried changing the id to a class, but that didn't work.
So how can I get the selected value of the select box that's actually triggering the event?
$(document).ready(function() {
$('#idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
alert(naam);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" id="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
Why can't you just use $(this).val(), if you want the selected Element?
But yes, when you've got multiple of the same ID, jQuery will over ever select the first one it finds - Though you do seem to know this; I've changed it to a class in this demo
$(document).ready(function() {
$('.idOfmyName').on('change', function() {
alert($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="edward">Edward </option>
<option value="vivian">Vivian </option>
</select>
for multiple you can do something like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" class="idOfmyName">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<script>
$(document).ready(function() {
var names = [];
$('.idOfmyName').change(function() {
var naam = $(this).find("option:selected").attr('value');
if($.inArray(naam,names)){
names.push(naam);
}
alert(names);
});
});
</script>
Vanilla JavaScript way to get selected value using onchange method
function getSelectedValue(val) {
alert(val);
}
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="jack">Jack</option>
<option value="rose">Rose</option>
</select>
<select name="myname[]" onchange="getSelectedValue(this.value)">
<option value="harry">Harry</option>
<option value="sally">Sally</option>
</select>

Javascript add new select index with data from database

I want to create a selection that triggers another selection to select data from the database when the first selection is selected.
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
How to take the data from the database if option 1, 2, or 3 is selected, and the second selection option has a value in it? And if the user changes the option, the second selection index is reset.
Here's the code with Javascript Vanilla:
<body>
<select id="brandSelect" onchange="optionSelected(this.value)">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
</body>
<script>
function optionSelected(value) {
alert(value)
// DO Database Fetch Code Here
}
</script>
And I will tell you there is a good website, we might not need jQuery.
In the bellow Code, by changing the #brandselect you can triger change on the other select. I put specific value. You can add the value you want there.
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#graphs').val("20");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="graphs">
<option value="10">AMD</option>
<option value="20">NVidia</option>
</select>
$(document).on('change', '#brandSelect', function() {
// Here you change the selection of the other Select
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
// Here you change the selection of the other Select
alert();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
first you need to handle change event and from based on that you can handle second dropdown change event.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="brandSelect">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="brandSelect2">
<option value="1">test1</option>
<option value="2">test2</option>
</select>
<script>
$(document).on('change', '#brandSelect', function() {
$('#brandSelect2').val("2");
$('#brandSelect2').trigger("change");
})
$(document).on('change', '#brandSelect2', function() {
//here you can use ajax call to fetch data from database.
alert();
})
</script>

JQuery Mobile CSS for dropdown menus

Here is a JSFiddle:
https://jsfiddle.net/7jknnn2n/
HTML:
<select class="base-choice">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<label class="contrastText" for="user_natives_language">Native Language</label>
<select class="first-choice" id="user_natives_language" name="user[natives_language]">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<label class="contrastText" for="user_next_language">I Want To Learn</label>
<select class="second-choice" id="user_next_language" name="user[next_language]">
<option value="Spanish">Spanish</option>
</select>
JS:
var $secondOption = $('.base-choice>option').clone();
$(".first-choice").change(function () {
var userSelected = $(this).val();
$('.second-choice').html($secondOption);
$('.second-choice option[value="' + userSelected + '"').remove()
});
CSS:
.base-choice{
display:none !important;
}
What I would like to do with the above JSFiddle is make it such that the .base-choice dropdown selector is hidden completely from the results portion of the fiddle. Also, when I toggle the Native Language dropdown and select something different you can see that the option for the I want to learn dropdown is no longer bolded. Any thoughts on how to fix this.
Since there is no way in CSS to select parent element you must use javascript.
In this updated fiddle I just found the select with base-choice and set the parent element (surrounding div) to also display:none.
$(".base-choice").parent().addClass("invisible");
https://jsfiddle.net/7jknnn2n/4/
Here is an updated fiddle https://jsfiddle.net/RachGal/7avurszn/1
var $secondOption = $('.base-choice>option').clone();
$(".first-choice").change(function () {
var userSelected = $(this).val();
$('.second-choice').html($secondOption);
$('.second-choice option[value="' + userSelected + '"').remove()
});
#select-3-button {
display:none!important;
padding:0!important;
opacity:0!important!;
}
.first-choice, .second-choice{opacity:.5; font-weight:normal;}
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<select class="base-choice">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<label class="contrastText" for="user_natives_language">Native Language</label>
<select class="first-choice" id="user_natives_language" name="user[natives_language]">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
<label class="contrastText" for="user_next_language">I Want To Learn</label>
<select class="second-choice" id="user_next_language" name="user[next_language]">
<option value="Spanish">Spanish</option>
</select>

Don't show default selected option in dropdown list

Is there a way to not show the first option inside the dropdown list of a HTML select tag? They only thing I know of is to disable it from being clicked but I want it to not be shown inside the dropdown, like this :
<select class="archive" onChange="window.location.href=this.value">
<option disabled="disabled" selected="selected">..după lună:</option>
<option value="#">Ianuarie 2015</option>
<option value="#">Februarie 2015</option>
<option value="#">Martie 2015</option>
<option value="#">Aprilie 2015</option>
</select>
I did not think about trying CSS to achieve this cause I thought that by adding style="display:none;" to my first option tag will hide the value from the box too, but as it appears, it doesn't. You can achieve this by changing my initial code in the question with:
<select class="archive" onChange="window.location.href=this.value">
<option disabled="disabled" selected="selected" style="display:none;">..lună:</option>
<option value="#">Ianuarie 2015</option>
<option value="#">Februarie 2015</option>
<option value="#">Martie 2015</option>
<option value="#">Aprilie 2015</option>
</select>
If i understood your question correctly, i believe what you are trying to do is this. Goodluck
$('.archive option:selected').hide(); //initialise
A much more dynamic approach for all selected elements is below:
$(function(){
$('.archive option:selected').hide(); //initialise
$('.archive').change(function(){
$('.archive option').show(200, function(){
$('.archive option:selected').hide();
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="archive">
<option selected="selected">..după lună:</option>
<option value="#">Ianuarie 2015</option>
<option value="#">Februarie 2015</option>
<option value="#">Martie 2015</option>
<option value="#">Aprilie 2015</option>
</select>
$(function(){
$('.archive option:selected').hide(); //initialise
$('.archive').change(function(){
$('.archive option').show(200, function(){
$('.archive option:selected').hide();
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="archive">
<option selected="selected">..după lună:</option>
</select>

Hide/Remove an option value from select if a value is selected/changed

I wanted to hide or remove the <option value=" "></option> when some value is selected from another drop down.
So this is something how I need it:
<Select id="first">
<option value="1">one</option>
<option value="2">two</option>
</select>
Now, when a option two is selected, the below drop down's first value which is a blank string "" should either get remove or hide from the selection.
<select id="too">
<option value=""></option>
<option value="time"time</option>
</select>
JQuery is a very effective library and I am still getting into it as a begineer. Any help on how to do this would be a great help
$( "#first" ).change(function() {
if(2 == $(this).val()){
$("#too").children()[0].remove();
}
});
http://jsfiddle.net/NHM28/
Here is your solution plain javascript
<html>
<Select id="firstSelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="secondSelect">
<option value=""></option>
<option value="time">time</option>
</select>
<script>
var node = document.getElementById("firstSelect");
node.addEventListener('change', removeOptionTag);
function removeOptionTag(){
var secNode = document.getElementById('secondSelect');
var allTags = secNode.getElementsByTagName('option');
secNode.removeChild(allTags[0]);
}
</script>
</html>
Here's a way of doing it.
HTML:
<select>
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
JS:
$(document).ready(function(){
$("select").click(function(){
if($("select option:selected").val() != ""){
$("select option[value='']").hide();
}
});
});
http://jsfiddle.net/9w6cN/

Categories