I want to build a drop down menu that the second selection will be displayed if the first selection data belongs to a specific category.
As you can see below, the first selection will be about COUNTRIES. If the country selected has states, then a second drop down selection will be displayed, containing the states of that country.
1)Is there a tag (in my code "xyz") that i can use it to separate the countries in "state" and "no-state" categories? If there is, how can i read the value of the "xyz" tag?
2) If i use the:
<option class="no-state" value="Germany">Germany</option>
and then use the jQuery to read it it will give me the value GermanySpain (which is correct but not what i want)
$('.no-state').val();
HTML PART
<div id="country">
<select>
<option xyz="no-state" value="Germany">Germany</option>
<option xyz="state" value="USA">USA</option>
<option xyz="no-state" value="Spain">Spain</option>
</select>
</div>
<div id="state" style="display:none" >
<select>
<option value="Utah">Utah</option>
<option value="New York">New York</option>
<option value="California">California</option>
</select>
</div>
JQUERY PART
$(document).ready(function(){
$('#country').change(function() {
if (the value of "xyz" tag is === 'no-state')
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
What can i do to address this issue?
Thanks.
Added a variable to keep if a country has states or not according your custom attribute xyz
js
$(document).ready(function(){
$('#country').change(function() {
var hasStates = $(this).find("option:selected").attr("xyz");
if (hasStates == 'no-state')
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
fiddle
I think you can make use of .data() jQuery method, which reads the data-* a valid html5 attribute, but you have to change your markup to fix and use this script:
$('#country select').change(function() {
if ($(this).find('option:selected').data('xyz') === 'no-state') {
$('div#state').hide();
} else {
$('div#state').show();
}
});
You have to add a data-* prefix to get to it and make it a valid html5 attribute.
<select>
<option data-xyz="no-state" value="Germany">Germany</option>
<option data-xyz="state" value="USA">USA</option>
<option data-xyz="no-state" value="Spain">Spain</option>
</select>
Using the class attribute isn't that bad:
HTML
<select>
<option class="no-state" value="Germany">Germany</option>
<option class="state" value="USA">USA</option>
<option class="no-state" value="Spain">Spain</option>
</select>
JavaScript
$(document).ready(function(){
$('#country').change(function() {
var $sel = $(this).find("option:selected");
if ($sel.hasClass("no-state"))
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
Fiddle
First of all I would change your html structure to:
<select id="country">
<option xyz="no-state" value="Germany">Germany</option>
<option xyz="state" value="USA">USA</option>
<option xyz="no-state" value="Spain">Spain</option>
</select>
<select id="state" style="display: none;">
<option value="Utah">Utah</option>
<option value="New York">New York</option>
<option value="California">California</option>
</select>
Then you can simply do:
$("#country").change(function() {
var hasState = $(this).find(':selected').attr('xyz') === "state";
$("#state").toggle(hasState);
});
Here is a fiddle to see it in action.
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 have these SELECTs in my page
<select id="select_status_id44" name="select_status_id[44]" class="inputbox" id = "status_id_44">
<option value="1">Pending</option>
<option value="2" selected="selected">Confirmed</option>
<option value="3">Cancelled</option>
<option value="4">Refunded</option>
<option value="5">Shipped</option>
<option value="6">Paid</option>
<option value="7">Complete</option>
</select>
And also this one
<select id="select_status_id78" name="select_status_id[78]" class="inputbox" id = "status_id_44">
<option value="1">Pending</option>
<option value="2" selected="selected">Confirmed</option>
<option value="3">Cancelled</option>
<option value="4">Refunded</option>
<option value="5">Shipped</option>
<option value="6">Paid</option>
<option value="7">Complete</option>
</select>
I want to do is that whenever any of these two SELECT is CHANGED, it shoul dget the select_status_id[ID] ID inside that tag...
For now I have simply done this but it does not work
$('select[name=select_status_id]').change(function() {
alert('dsada');
});
I know that I should not get using ID attribute because they are different for both ... but NAME attribute is same
Try this way
$('select[name^="select_status_id"]').change(function() {
alert($(this).attr('name').split('[')[1].replace(']',''));
});
DEMO
You can try this on change for each select.
$("#select_status_id44").change(function(){
var val = "select_status_id["+$(this).val()+"]";
$(this).prop("name", val);
console.log(val);
});
UPDATE: Check this Fiddle : http://jsfiddle.net/JayKandari/L8TWN/1
if you can add a data-property to your select
<select data-id-value="42" ..... >
$('select').on('change', function() {
console.log ( $(this).data('id-value') );
});
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");
I have a select element of the form:
<select id="test" name="test">
<option value="blah">Test1</option>
<option value="blah">Test2</option>
.
<option value="blah">Testn</option>
</select>
I want to display the text "Select a test" as default.
I know the way of doing this is to set a new option
<option selected="selected">Select a test</option>
at the top. But I'm looking for some other way where I don't have to use the tag.
Is it possible through javascript (jQuery will also do)?
I've done this with a dummy entry in the past...
HTML
<select id="test" name="test">
<option value="0">Select an option...</option>
<option value="blah">Test1</option>
<option value="blah">Test2</option>
<option value="blah">Test3</option>
<option value="blah">Test4</option>
<option value="blah">Test5</option>
</select>
Javascript
$("#test").on("change", function() {
if ($(this).val() != "0") {
$("option[value=0]", this).remove();
}
});
Here's a working example on jsFiddle...
http://jsfiddle.net/97Bqr/
The "Select an option" option is removed as soon as you select something else.
Here's a plain js solution:
var selecttest = document.querySelector('#test');
selecttest.insertBefore(new Option('select a test'),selecttest.firstChild);
selecttest.selectedIndex = 0;