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>
Related
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 want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
I have something like :
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
I am trying to do, if Scrammer is selected in #BadReason select 1 week in #BanLength automaticly.
try using change event BanReason and based on this value pass the desired value to BanLength and trigger the change.:
$("#BanReason").on("change",function(){
if(this.value == "scrammer"){
$("#BanLength").val("1week").trigger("change");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="BanReason">
<option value="hack">Hack</option>
<option value="badlang">Bad Language</option>
<option value="scrammer">Scrammer</option>
</select>
<select id="BanLength">
<option value="1day">1 Day</option>
<option value="2days">3 Days</option>
<option value="1week">1 Week</option>
</select>
On change event will help you to do this
$("#BanReason").on("change",function(){
if($(this).val() == "scrammer")
$("#BanLength").val("1week");
});
Added a Fiddle to this
Fiddle
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/
Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
You can use the onChange property. Something like:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
Add an onchange event handler and set the pages location to the value
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
Maybe this will help:
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
This is an old question, I know but for 2019 peeps:
Like above if you just want to change the URL you can do this:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom" or "?a=567" use window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
Extending on #kevin's answer,
if someone has to perform some confirmation logic if URL is critical.
<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
<option selected disabled>Action</option>
<option value="/user/view">View</option>
<option value="/user/edit">Edit</option>
<option value="/user/delete">Delete</option>
</select>
You can use this code:
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>