Set value of a select box - javascript

I have the following select-box:
<select name="country">
<option value="us">America</option>
<option value="jp">Japan</option>
<option value="cn">China</option>
<option value="vi">Vietnam</option>
</select>
By default, the value of this select-box is "us" and the displayed text is "America".
What I want to do is set the value of this select box to "jp" and set the text displayed on this select-box to "Japan" using javascript.
I can set the value to "jp" easily by setting the "selected" attribute to "true", but I can't change the text display on the select-box (It still display "America" instead of "Japan").
Are there anyone know how to do that?

You need to set the value of the select itself rather than set the options selected to true.
var element = document.getElementsByName('country')[0];
element.value = 'jp';

Can you try this, add selected="selected" based on your preference in HTML, Javascript document.getElementsByName('country')[0].value.
Using HTML:
<select name="country">
<option value="us">America</option>
<option value="jp" selected="selected" >Japan</option>
<option value="cn">China</option>
<option value="vi">Vietnam</option>
</select>
Using javascript:
document.getElementsByName('country')[0].value = 'jp';

To use JavaScript, you could use...
selectElement.value = "jp";
jsFiddle.

Related

How do I best access the value attribute of the DOM-Element with jquery?

I have dynamically generated the following dropdown list using jquery for the calculator app I am currently making:
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
What now I try is to access the value attribute of every option, but I don't get far. The examiner is showing the value attribute in the elements tab, I can also find under the options when I look at the properties in the browser, but I am unable to access them via JavaScript.
I tried:
const leftVal = $('#field__left').children('option').attr('value');
also
const leftVal = $('#field__left').children('option').data('value');
but it returned undefined, while:
const leftVal = document.querySelector('#field__left').getAttribute('value');
gave me null.
Anybody has the ide where my mistake lies?
Thank you in advance.
I try is to access the value attribute of every option
You need a loop...
$("#field__left option").each(function(){
console.log($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
$('#field__left').children('option') will return an array of all select option nodes, you have to iterate through it to get values of each option
Here is the simple solution
// get list of an options
var options = $('#field__left option');
// Then, convert that into an array of just the values
var values = $.map(options, e => $(e).val())
console.log(values)

How to print the name of corresponding value of select tag?

We can print the value of select option using
document.querySelector(".choose").value; but I need the name of it's corresponding value
Ex: If the value of select is "VAR CHAR" but you need to print the name as text
<select name='choose' class='choose'>
<option name='text'>VAR CHAR</option>
<option name='number'>NUMBER</option>
<option name='radio'>RADIO</option>
<option name='checkbox'>CHECK BOX</option>
<option name='email'>EMAIL</option>
<option name='file'>FILE</option>
<option name='date'>DATE</option>
<option name='password'>PASSWORD</option>
<option name='range'>RANGE</option>
<option name='tel'>TELEPHONE</option>
<option name='submit'>SUBMIT</option>
<option name='button'>BUTTON</option>
<option name='reset'>RESET</option>
</select>
just tried something..
document.querySelector('.choose').selectedOptions[0].getAttribute('name');
You select element has a class by the name of "choose" and you can use the following code which was written by jquery.
$('.choose').on('change', function() {
var selectedOption = $(this).find('option:selected');
name = selectedOption.attr('name');
});
Looks like you know how to select the element already. Now all you need to do is
var name = element.getAttribute("name");
and then print it.

populate second dropdown based on selected value of first dropdown

I have two dropdown i want when i select for example from dropdown test1 option with value a
the second dropdown test2 show only the options that have value a
<select name="test1" id="test1" onchange="document.getElementById('test2').value=this.value">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<select id="test2" name="test2">
<option value="Select">Select</option>
<option value="a">a</option>
<option value="a">b</option>
<option value="a">c</option>
<option value="b">1</option>
<option value="b">2</option>
<option value="b">3</option>
<option value="c">c</option>
</select>
Or you can go this way:
jQuery(document).ready(function($){
var options = $('#test2 option');
$('#test1').on('change', function(e){
$('#test2').append(options);
$('#test2 option[value!=' + $(this).val() +']').remove();
});
});
fiddle
Since you've tagged this with JQuery, if I were to not alter your HTML at all, you could do this by changing the JS in your onchange from this:
document.getElementById('test2').value=this.value
. . . to this:
$("test2").find("option").hide();
$("test2").find("[value^='" + $("test1").val() + "']").show();
That would hid all of the options in the "test2" dropdown, and then show all of the ones that have a value that starts with the value of the currently selected "test1" option.
Note: this will also work if you chose to update the code to only use the "test1" values as a prefix for the "test2" values. ;)
UPDATE: Fixed a typo in the code.
Like it was said, you really don't want to do it this way as each option should have a unique value....but here is one way to accomplish it: jsFiddle
Using jQuery, you could check for the value of the selected option in test1, hide all those in test2 that don't match then show those with a matching value.
$('#test1').on('change', function() {
$('#test2 option:not(option[value='+$(this).val()+'])').hide();
$('#test2 option[value='+$(this).val()+']').show();
});

HTML select option value

I have a select option :
<select>
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
Now what I want is that whatever option I select from the dropdown, the value in the select should always be "select".
Thanks.
you could try something like this:
<select id="yourselect">
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
<script>
var s = document.getElementById('yourselect');
s.onchange = function() {
s.selectedIndex = 0; // on change event always select the first option
}
</script>
Example Fiddle : http://jsfiddle.net/8geek/
Add an event listener for an onchange event, in that listener you set the currently selected option to Select dynamically
Like Jukka mentioned, it seems like you want a select element where all the choices have the same effect? However, you should at least store the the chosen option.
Maybe this is something you are looking for: http://jsfiddle.net/NfRRM/

Value selected option dropdownbox

I've got a dynamic dropdownbox:
function chgAantal(i,artNr,lengte){
var aantal=document.getElementById("aantal_"+i).value;
if(isNaN(aantal)){
alert('Voer een geldig aantal in...');
document.all["error_"+i].src="/images/fout.gif";
ok=0;
}
else{
location.href="addcart.asp?act=change&aantal="+aantal+"&artNr="+artNr+"&lengte="+lengte+"&bdr=<%=bdr%>";
}
}
<select onchange='chgAantal(\""+i+"\",\""+artNr+"\",\""+lengte+"\")' name='aantal_"+i+"' value='"+aantal+"'/>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
</select>
When I change the value in (for example) 7, the value changes in the script. But I can't see the selected value, the value displaying is always 1.
How can I display the selected value?
I hope you understand me!
Regards,
Fraak
You should not be specifying the value in the Select tag as is determined by the selected option. Useful DOM properties for working with select Elements are:
selectedIndex: gets/sets the Id of the selected option.
value: returns the value of the selected option.
What you need to do here is change selectedIndex.
https://developer.mozilla.org/en/DOM/HTMLSelectElement
code is perfect i think problem is with onchange check if the variables u have declared is proper

Categories