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') );
});
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>
How can I get input values to change dynamically when I select some element from select tag. I want in this input box to be shown a proper value when I change select option.
<select onchange="changevalue()" id="selectingg">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
You could use addEventListener on change event and get the value from the event.target dropdown like so:
document.getElementById("dropdownCategory").addEventListener('change', event => document.getElementById('categorySelected').value = event.target.value);
<select id="dropdownCategory">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
</select>
<input type="text" id="categorySelected"></input>
The below code is working fine for me you may try this code.
In below code I am assigning select value to input tag value.
function changevalue(){
document.getElementById("inputting").value =
document.getElementById("selecting").value;
}
<select onchange="changevalue()" id="selecting">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
<select class="form-control" id="prodname" name="pname" >
<option value="0" disabled="disabled" selected="selected">-- Select Product --</option>
#{
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id">#product.Product_Name</option>
<option hidden>#product.Quantity</option>
}
}
</select>
I want to select this option.
<option hidden>#product.Quantity</option>
I have tried this selector but could not get text.
var productunitprice = $("#prodname option").find("hidden").text();
You can use var text = $("option:selected",this).next().text() Example below.
$("#prodname").change(function() {
var text = $("option:selected",this).next().text()
console.log(text)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="prodname">
<option value="1">1</option>
<option hidden>1.1</option>
<option value="2">2</option>
<option hidden>2.2</option>
</select>
As an alternative to adding many unused and hidden options.
You can add the unit price to the relevant option directly using a data attribute for example data-unit-price.
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id" data-unit-price="#product.Quantity">#product.Product_Name</option>
}
Then simply read it from the selected option. In my humble opinion it is cleaner and doesn't use additional hidden option elements as storage for data belonging to other options.
$(document).ready(function() {
$("#prodname").change(function() {
var productunitprice = $("option:selected", this).data('unitPrice')
console.log(productunitprice)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="prodname" name="pname">
<option value="1" data-unit-price="5.25">product 45</option>
<option value="2" data-unit-price="12.99">product 94</option>
</select>
I have the following select:
<select class="my-select">
<option value="-1">All</option>
<option value="7">Red</option>
<option value="8">Green</option>
<option value="9">Blue</option>
</select>
I then have a function that runs to see what the selected option is in the select:
function getSelectedOption () {
var selection = $('.my-select').val();
console.log(selection);
}
This is where it gets weird, I can run that function when 'Red', 'Green' and 'Blue' is selected and it'll always return me the correct value. But when I select 'All', the correct value is returned (-1), but when I go back and select 'Red' or any other option after that, the returned value is always (-1). Suggesting that 'All' is selected. When it's not. I also inspected the DOM to see, and in the case where 'Red' was selected, the DOM looks like:
<select class="my-select">
<option value="-1">All</option>
<option value="7" selected="selected">Red</option>
<option value="8">Green</option>
<option value="9">Blue</option>
</select>
But $('.my-select').val() is returning me the wrong value.
Try this:
$('.my-select').find('option:selected').val()
and it should not be <option val="7"></option>, instead it should look like this:
<option value="7"></option>
Seems to work as it should, what browser are you using?
var $select = $('select');
$select.on('change', function (event) {
console.log($(event.target).val());
});
$select.trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="my-select">
<option value="-1">All</option>
<option value="7">Red</option>
<option value="8" selected>Green</option>
<option value="9">Blue</option>
</select>
You have used wrong attribute in option is val, correct attribute is value for assign different value then text/label
function getSelectedOption () {
var selection = $('.my-select').val();
console.log(selection);
}
$(".my-select").change(getSelectedOption);
getSelectedOption();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="my-select">
<option value="-1">All</option>
<option value="7" selected="selected" >Red</option>
<option value="8">Green</option>
<option value="9">Blue</option>
</select>
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.