I have a dropdown which i would like to trigger a function when something is selected.
<select id="myselect">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
$(document).on("change", "#myselect", function(event) {
alert("you selected something");
});
The problem I have is that the function is not triggered if i choose option that has already been selected. I do understand that this is because nothing has been changed but is there a way around this?
I have tried
<select id="myselect" onmousedown="this.value='';" >
this was ok for the few options, but when i had many options when i needed to scroll down to select it would jump up and select the wrong option.
Any help much appreciated.
Try
<select id="myselect" onclick="alert('Something selected')">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
UPDATE
$(document).on("change", ".myselect",function(){
var idSelect = $(this).attr("id"); /*get the id select change*/
$(".myselect").each(function(){
var idSelectOther = $(this).attr("id");/*get the id of another select*/
if(idSelect != idSelectOther){ /*if id selected != other select then check value*/
if($("#"+idSelect).val() == $("#"+idSelectOther).val()){ /* if val same so alert the user.*/
alert("you already select this value");
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" id="sel1">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
<select class="myselect" id="sel2">
<option val="1">1</option>
<option val="2">2</option>
<option val="3">3</option>
</select>
Related
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>
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>
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
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/
I'm stuck with a jquery problem .. I actually want to disable all the (from all other items except the parent one) if the selected value is "interestingValue"
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
ex : if we select "interestingValue" from the first menu we get
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2" disabled="disabled">bar foo2</option>
<option value="foo2" disabled="disabled">foo abc2</option>
<option value="bar2" disabled="disabled">foo abc2</option>
</select>
ex : if we select "interestingValue2" from the second menu we get
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue" disabled="disabled">bar foo</option>
<option value="foo1" disabled="disabled">foo abc1</option>
<option value="bar1" disabled="disabled">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>
thanks :)
If your select tags are siblings you can try:
$('select').change(function(){
if (this.selectedIndex == 0) {
$(this).siblings('select').find('option').prop('disabled', true)
}
})
DEMO
I'm not sure I get it, but something like this:
$('[id^=menufoo]').on('change', function() {
if (this.value.indexOf('interestingValue') != -1 ) {
$('[id^=menufoo]').not(this).find('option').prop('disabled', true);
}else{
$('[id^=menufoo]').find('option').prop('disabled', false);
}
});
FIDDLE
You can attach an onchange event to both select items and check whether the new select value is equivalent to interestingValue for the first menu and interestingValue2 from the second menu. You can use .prop() to disable this.
You can do something like this:
$("#menufoo").bind("change", function(event){
$("#menufoo2").find("option").prop("disabled", ($(this).val() == "interestingValue"));
});
$("#menufoo2").bind("change", function(event){
$("#menufoo").find("option").prop("disabled", ($(this).val() == "interestingValue2"));
});
here you go
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#menufoo").change(function (){
if($("#menufoo option:selected").val()=="interestingValue")
$('.menufooClass2 option').attr('disabled','disabled');
});
$("#menufoo2").change(function (){
if($("#menufoo2 option:selected").val()=="interestingValue2")
$('.menufooClass option').attr('disabled','disabled');
});
});
</script>
<select name="menufoo" id="menufoo" class="menufooClass">
<option value="interestingValue">bar foo</option>
<option value="foo1">foo abc1</option>
<option value="bar1">foo abc1</option>
</select>
<select name="menufoo2" id="menufoo2" class="menufooClass2">
<option value="interestingValue2">bar foo2</option>
<option value="foo2">foo abc2</option>
<option value="bar2">foo abc2</option>
</select>