jQuery get the <select> value rather than the selected <option> value - javascript

In the above example the console logs a value of 1 which is the currently selected option. How can you log the <select> tag's value of 2?
$(document).ready(function() {
console.log($('.mySelect').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelect" value="2">
<option value="1" selected>Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>

This is not valid HTML syntax.
Use data attributes like data-someattr for values you want to pass.

This would work for you .
console.log( $('.mySelect[value=2]').val() );

Related

jQuery to serialize selected option's value, not label

I have a select control:
<select name="AdditionalCategory">
<option value="1">Category 1</option>
<option value="2">Category 2</option>
</select>
I then use jQuery to send AJAX request, serializing the form:
$.post("../../d/up.php",$("#main").serialize(),
function(data){
But, if I choose Category 1 for example, the serialize() function serializes the label, not the value of the option. So the request would be up.php/?AdditionalCategory=Category 1
Is there a way to tell the function to send the value, like this:
up.php/?AdditionalCategory=1
It should work fine but there is a slight error in your HTML form which is the closing tag of <option> you have is </value> which shoule be </option> instead.
Check working code below:
$(function() {
$("#but").click(function() {
console.log($("#main").serialize());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main">
<select name="AdditionalCategory">
<option value="1" selected>Category 1</option>
<option value="2">Category 2</option>
</select>
</form>
<button id="but">Click me</button>

Math formulas from option values

Please help me with this solution. I have simple form:
<select id="select-1" name="select-1">
<option value="0"> option 1</option>
<option value="1"> option 2</option>
</select>
<select id="select-2" name="select-2">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
</select>
Below this form i want display dynamically calculation like this:
option from select-1 is in array (e.g. value[0]=1.50, value[1]=5)
option from select-2 is option value from list
In start result: value[0]=1.50 * 1 = 1,50
after change select result will change dynamically.
Angular is neccessary or only JS?
You have to set the value of each option of your select-2 with a "on-change event" on select-1.
In your on-change function you have to get the value of the select-1 and set the different values for your select-2.

Adding Hidden Attribute To Select Option Based On Option Value

I'm trying to create a working function that will hide specific select options based on certain values. The options will not have a class or id so I need to use the option value as an identifier.
Does anyone see a problem with this function?
function delivery_rate(valMap) {
if(valMap === 5000){
$(".addon-select option[value="1-day-1"]").setAttribute("hidden", true);
}
}
Instead of applying hidden on the options tag, create different versions of <select> and set all to be hidden. When a user selects a value that matches the criteria of that <select> tag, show that specific tag.
<select name="select" class="first-select">
<option value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
<select name="select" class="second-select">
<option value="value4">Value 1</option>
<option value="value5" selected>Value 2</option>
<option value="value6">Value 3</option>
</select>

Get DropDown value using its name in JQuery

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') );
});

Select dropdown option at the time of document load using Jquery

How to select dropdown option at the time of document load using Jquery?
Use
$(document).ready(function(){
$('#select-Id').val("rightVal");
});
Example:
For
<select id='days'>
<option value="sun">Sunday</option>
<option value="mon">Monday</option>
</select>
Use below code to select Monday
$(document).ready(function(){
$('#days').val("mon");
});
HTML:
<select id="sel">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Jquery:
​
$(document)​.ready(function(){
$('#sel').val('2');
})​;​
See Demo
You can use
$(document).ready(function(){
$('#sel').val('myValue'); // to set the current value
var selectedvalue=$('#selectId').val(); // get the selected value
alert(selectedvalue);
});
DEMO.

Categories