Changing the selected option with jQuery [duplicate] - javascript

This question already has answers here:
Change the selected value of a drop-down list with jQuery
(18 answers)
Closed 8 years ago.
I'd like to change the selected option with jQuery.
<select name="nameSelect" id="idSelect">
<option value="0">Text0</option>
<option value="1">Text1</option>
<option value="2" selected>TextSelected1</option>
</select>
I'm trying with $("#idSelect").val(); or similar, but it doesn't work.
Regards

pass the value which needs to be set as parameter in .val() :
$("#idSelect").val('0');

That does work, but you need to include the value of the option you want selected as a parameter to val(), e.g.:
$("#idSelect").val('1');

Add the value in the val as
$("#idSelect").val(0);

You can simply change the value of the select. And I would suggest it to use the select[name=NAME]-Tag..
$('select[name=nameSelect]').val(1);
Greetings from Vienna

Related

How to access data-attributes of HTML elements using javascript [duplicate]

This question already has answers here:
PURE JS get selected option data attribute value returns Null
(4 answers)
Closed 4 years ago.
I have a dropdown menu in my form. Each option has 3 data-attributes associated with it. When one option is selected I call a function that sets the values of hidden html objects to the value of each data attribute so I can pull that information on the next page. However, the value of the data-attributes keeps coming up as "undefined". What am I doing wrong?
<script>
function change_charge(x)
{
alert (x.dataset.amount);
}
</script>
<select name="description" id="description" onchange="change_charge(this)">
<option value="Test" data-amount="10.00" data-type="charge" >TEST </option>
</select>
I expect the alert to say the value of data-amount but instead it says "undefined"
I have also tried:
alert (x.getAttribute('data-amount'));
But that returns "null".
x is the <select>, not the <option>. The select has no data- attributes.
If you want the option, use
var option = x.options[x.selectedIndex];
console.log(option.dataset.amount);
This answer shows how you can get a custom attribute from JavaScript.
Summary: you can use getAttribute()
x.getAttribute("data-amount");
EDIT:#James also makes a good point, which is x is the selector, not the option. Thus you will probably need a combination of our two answers:
x.options[x.selecetdIndex].getAttribute("data-amount");

Constraint validation to not match a constant value [duplicate]

This question already has answers here:
Can I apply the required attribute to <select> fields in HTML?
(13 answers)
Closed 5 years ago.
I'm trying to make a pattern-matching using HTML5 constraint-validation to check if a value is not equal to a given value.
<select pattern="(?!ZZZ)">
<option value="ZZZ">Please select a nation™</option>
...
<option value="GER">Germany (GER)</option>
...
<option value="ZIM">Zimbabwe (ZIM)</option>
</select>
In case the user has selected the default value ZZZ it should match and show the error-message (which is done via JavaScript).
I tried different online tools to check whatever pattern I use but nothing.
I simply need to check if the value does not match a constant string ZZZ but I don't get it.
Already tried to go the other way around so it has to match ZZZ and invert this regex somehow. But even there I get stuck.
You're overthinking it. :-) Just make the value of that option "" and use required:
select:invalid {
color: red;
}
<form>
<select required>
<option value="">Please select a nation™</option>
<option value="GER">Germany (GER)</option>
<option value="ZIM">Zimbabwe (ZIM)</option>
</select>
</form>
From the WHAT-WG HTML spec for required:
If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.
And so selecting that option does not make the select valid.

Putting value of "select" tag into JavaScript variable [duplicate]

This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
Sample of <select> HTML form element from W3Schools (a bit modified):
<select>
<option value="a">Option A</option>
<option value="b">Option B</option>
/*...*/
</select>
As far as I could see, neither option nor select has id property, so the good old document.getElementById("name of select element").value does not work.
But then, how can I put the value attribute of the option that is selected in the list into a JS variable?
I'm aware that it can be done by a function call, e.g. when I push a button element, but what do I have to write into that function?
Aside from just giving it an id, you can add an onchange event:
<select onchange="yourfunction(this.value)">
...
There are also other ways to access elements in your DOM. For example, assuming this is the only (or first) select on your page you could access its value with a line like this:
var val = document.getElementsByTagName("select")[0].value;
If you don't have an id to work with, the DOM provides a few other APIs that you can use, but probably the most versatile is:
document.querySelector("CSS Selector Here");
So, you could use a selector that finds the select element by the tag name select or by its position in the DOM or by a class name applied to it, etc.
Then, to get the value, you'd write this:
var val = document.querySelector("CSS Selector Here").selectedIndex.value;

jQuery select box .val('') behavior differs from 1.9 to 1.10+ what is the shortest way to do that [duplicate]

This question already has answers here:
How to set the first option on a select box using jQuery?
(18 answers)
Closed 8 years ago.
The following behaves differently between jQuery 1.9 and 1.10+:
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$('#s1 option[value=1]').hide();
$('#s1').val('');
The idea behind this code is to select the first option.
After 1.10, the $('#s1').val(''); part is no longer working in the same way. I suppose that it was never meant to be used that way but its old code and have to be modernized in some way...
After jQuery 1.10 nothing is selected and $('#s1').val() returns null.
Changing code to:
$('#s1 option[value=1]').hide();
$('#s1').val($('#s1 option').first().val());
Does the job with both new and old jQuery versions.
My question is if there is shorter/more elegant way to do the same thing?
$("#s1")[0].selectedIndex = 0;
You can also do this if you really like jQuery:
$("#s1").prop("selectedIndex", 0);
More here: https://stackoverflow.com/a/1314266/283863
Just don't set the value it selects first value automatically and works in both versions:
$('#s1 option[value=1]').remove();
//$('#s1').val('');
demo version: 1.9.1 and demo version: 1.10.1
As per your update and comments, you can use like this:
$('#s1 option[value=1]').hide();
$('#s1 option[value=2]').hide();
$('#s1 option:visible').first().attr('selected', 'selected');
demo

Javascript - Select drop down element with target value

I have a drop down box with values dynamically populated from a database. So, its HTML is somewhat like this:
<select id="productclass">
<option value="1">Name1</option>
<option value="7">Name2</option>
<option value="11">Name11</option>
</select>
Where the id's and the names are pulled from the database.
I need to be able to write JavaScript to select the option with a specific value. So, how can I make option #7 selected using JavaScript? I can use JQuery too if it's easier.
If you want to select the option with value 7, use:
document.getElementById("productclass").value = "7";
$("#productclass").val("7"); //jQuery
If you mean option number 7 by "#7", use:
document.getElementById("productclass").selectedIndex = 6;
// Indexes are zero-based, the 7th element is referred through index 6
Try this with jquery:
$('#productclass').val('7');
Here's a jsfiddle

Categories