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>
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 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've got a group of 16 select boxes in a php mail() form, and I want to disable an option if it's chosen in any other box.
The order of options in the select boxes aren't the same, and the I need the value for the php mail.
I want the user filling in the form to not be able to choose the same option twice or more.
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
Also, further down the website, I want to do the same with another group of 8 select boxes - and they contain some of the same options, but then I want them all to be choosable from the beginning, until an option from one of them get picked.
I know too little about jQuery and JavaScript. Help?
Use .filter to get option-elements having value similar as current value.
$('select').on('change', function() {
$('option').prop('disabled', false); //reset all the disabled options on every change event
$('select').each(function() { //loop through all the select elements
var val = this.value;
$('select').not(this).find('option').filter(function() { //filter option elements having value as selected option
return this.value === val;
}).prop('disabled', true); //disable those option elements
});
}).change(); //trihgger change handler initially!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
Fiddle Demo
Thanks, Rayon.
I finally got it to work flawlessly with this piece of code:
<script type="text/javascript">
$('select[name*="box1"]').change(function(){
$('select[name*="box1"] option').attr('disabled',false);
$('select[name*="box1"]').each(function(){
var $this = $(this);
$('select[name*="box1"]').not($this).find('option').each(function(){
if($(this).attr('value') == $this.val())
$(this).attr('disabled',true);
});
});
});
</script>
i founded more example about this, but when i try , it's not work.
$(window).load(function () {
$("#country").html('Please select in here');
});
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please see it and tell me "Why it's not working?".Thank guys
It's impractical to replace the whole content between <select id="country"> and </select> with 'Please select in here' ? If you just want to replace the first option's content, then try this.
$(window).load(function () {
//$("#country").html('Please select in here');
});
$(document).ready(function() {
//$("#country").html('Please select in here');
$("#country").find("option:first-child").html('Please select in here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Not quite sure what you want, but if you want to add another option just append/prepend new option into select like so:
$(window).load(function () {
$("#country").prepend('<option value="" selected>Please select in here</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please select in here:
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
You can't add text in the select. You need to add in front of it.
If you really want to add the text after load, put one more div in front of the select to control
I am not entirely sure what you are trying to do, but if you just want to change the default text, you probably are looking for something like this:
<select id="country">
<option value="None" selected>Please select in here</option> <!-- set the default selection -->
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
and then the JS to set a new value would be:
$(window).load(function () {
$("#country").val('China');
});
Bit confuse what you trying to achieve
To Pre append
$('#country').prepend('<option>Please select in here</option>');
To dynamically Select:
$('#country').val("None")
Add new Option:
$('#country').append(new Option('Foo', true));
I have a drop down list like this:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="ar-jo">Arabic</option>
<option value="en-us">English</option>
<option value="fr-FR">French</option>
<option value="es-cl">Spanish</option>
</select>
If I select "Arabic",the drop down list should display "Arabic". But am always getting "Language".
EDIT
I got the answer by using Viewbag
Script:-
<script type="text/javascript">
$(function () {
$('#ddlLanguage').val("#ViewBag.Msg");
$('#ddlLanguage').change(function () {
$('#currentCulture').val($(this).val());
$(this).parents("form").submit();
});
});
</script>
In the controller i have set value of ViewBag.Msg.
ViewBag.Msg = ddlLanguage
Try with this code
$('#ddlLanguage').change(function(){
alert( $(this).find('option:selected').text());
});
Update your dropdown with code given below:
<select id="ddlLanguage" name="culture">
<option value="null" >Language:</option>
<option value="Arabic">Arabic</option>
<option value="English">English</option>
<option value="French">French</option>
<option value="Spanish">Spanish</option>
</select>
Set the selected attribute to selected on the given option.
$("your option").attr("selected", "selected");