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
Related
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)
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.
I try to get the selected value of the dropdown. But it keeps returning the first option value although I may choose different values. Is there any error in the code that makes this error?
<select id="category" name="category">
<option disabled selected value> -- select an option -- </option>
<option value=1>Rock</option>
<option value=2>Classical</option>
<option value="Country">Country</option>
<option value="Folk">Folk</option>
<option value="EDM">EDM</option>
<option value="Heavy Metal">Heavy Metal</option>
<option value="Hip-hop">Hip-hop</option>
<option value="Jazz">Jazz</option>
<option value="Pop">Pop</option>
<option value="Popular">Popular</option>
<option value="Rap">Rap</option>
<option value="Soul">Soul</option>
</select>
function Ulog() {
var select_id = document.getElementById("category");
select_id.options[select_id.selectedIndex].value;
}
This is because you are not listening to change event
try this
const select_id = document.getElementById("category");
select_id.addEventListener('change', evt => {
console.log(select_id.selectedOptions[0].value);
});
I hope this will help
i am looking how to have it when i pick volvo option then the 740 is selected. i want to add other if statements but i cant not figure this out. if i pick saab i want it to select 240
I would like to use jquery or javascript
Thank you in advance. This is what i have and it does not work.
Below is the corrected code to change the drop downs.
<select id="myselect1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="myselectVolvo">
<option value="740">740</option>
<option value="940">940</option>
<option value="240">240</option>
<option value="340">340</option>
</select>
$('#myselect1').change(function(){
if($('#myselect1').val() == 'volvo'){
$('#myselectVolvo').val('940').trigger('change');}
else if($('#myselect1').val() == 'saab'){
$('#myselectVolvo').val('240').trigger('change'); }
//alert("The text has been changed.");}
//};
});
You have a typo in the last js code line.
#myselctVolvo should be #myselectVolvo
your condition in if is wrong you need to use $('#myselect1').val() == 'volvo'. You
missed .val() after jquery selector.
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.