My question is how can I get the value from aria-labelledby value?
I have two method let user input, one is text another is drop-down list，
but I can't find how to select value from same label.
Here is my code
<label id="lblconnect">Connect:</label>
<input id="connect text" name="connect text" aria-label="lblconnect">
<select id="connect" name="connect" aria-label="lblconnect">
<option hidden selected>Choose Connect Type</option>
<option value="wired">Wired</option>
<option value="wifi">WIFI</option>
<option value="bt">BT</option>
<option value="ble">BLE</option>
<option value="ble5">BLE5</option>
<option value="lora">LoRa</option>
<option value="nb-iot">NB-IoT</option>
<option value="zigbee">ZIgBee</option>
</select><br/><br/>
I am assuming you want to get the value of the Select Field. If so, you can get it by using its Id
const x = document.getElementById("connect");
console.log(x.value);
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)
This my custom select menu:
<select name="bankSelect" id="bankSelect" onchange="dispchange(this.form.bankSelect)">
<option>EQUIFAX</option>
<option value = 5 >EQUIFAX</option>
<option value = 6>TRANSUNION</option>
<option value = 7>EXPERIAN</option>
<option value = 8>BANK OF AMERICA</option>
<option value = 9>WELLS FARGO</option>
<option value = 10>CITIBANK</option>
<option value = 11>JPMORGAN</option>
<option value = 12>NAVIENT</option>
<option value = 13>CAPITAL ONE</option>
<option value = 14>U.S BANCORP</option>
</select>
This is my label:
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
I need to change the text within label with the ID='bank to the option i select from the menu i above.
So if i pick the option with value 9, then my label should change the text it's displaying by defualt,'EQUIFAX' to then display 'WELLS FARGO'.
This is what I've tried in my java-script based on googling similar questions:
function dispchange(bankSelect) {
var bsel_index = bankSelect.selectedIndex;
var bselin = bankSelect.options[bsel_index].value;
if(bselin == '6')
document.getElementById("bank").innerHTML = 'Transunion';
else if(opcao == '1')
document.getElementById('complemento').innerHTML = 'Titulo';
}
It does nothing. What am I doing wrong? Is there a better way / another way to change the label? Can I use something other than a label to display my choice from the selection menu? If so, how do I ensure is always displays the choice currently selected?
use option.text instead of option.value:
function dispchange() {
var el = document.getElementById('bankSelect');
document.getElementById('bank').innerHTML = el.options[el.selectedIndex].text;
}
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
<option>EQUIFAX</option>
<option value="5">EQUIFAX</option>
<option value="6">TRANSUNION</option>
<option value="7">EXPERIAN</option>
<option value="8">BANK OF AMERICA</option>
<option value="9">WELLS FARGO</option>
<option value="10">CITIBANK</option>
<option value="11">JPMORGAN</option>
<option value="12">NAVIENT</option>
<option value="13">CAPITAL ONE</option>
<option value="14">U.S BANCORP</option>
</select>
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
function dispchange(bankSelect) {
console.log(document.getElementById("bankSelect").value)
document.getElementById('bank').innerHTML = document.getElementById("bankSelect").value;
}
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
<option value="EQUIFAX">EQUIFAX</option>
<option value="TRANSUNION">TRANSUNION</option>
<option value ="EXPERIAN">EXPERIAN</option>
<option value= "BANK OF AMERICA">BANK OF AMERICA</option>
<option value ="WELLS FARGO">WELLS FARGO</option>
</select>
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
If you can change the value of the options from number to the Bank name then the following code is going to work as you need.
Otherwise, you have to create an array or object with the numbers and Bank names.
Is the above code work for you?
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>
I am new to javascript and cannot find an easy-to-understand answer.
I would like a certain value to get passed to a hidden field when a user selects a certain option from the select dropdown.
I know that there are if/else statements but I'm not sure if that would be used in this situation.
For example: I have a select dropdown of a list of states.
<select name="HomeState" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
As you can see, any option other than California will be rated at a value of 1.
I would like it to where if the user selects the option of California, then the value of $300 will get passed to a hidden form field.
<input name="AmountNeeded" type="hidden" value="300" />
If they select anything other than California, the hidden field would get passed $100
<input name="AmountNeeded" type="hidden" value="100" />
How would I implement this logic? Would it be using if/else statement? I am new and don't exactly know how to set that up.
To keep this simple you could assign ids to the <select> and hidden <input> and listen to the change event via onchange() on the <select> with a function call.
And based on the selected item, change the value of hidden input.
NOTE: To test the snippet out I have removed the type="hidden". Do place it back.
function homeSelected(){
const home = document.getElementById("homeSelector").value;
if(home == 5){
document.getElementById("amountNeeded").value = 300;
}else{
document.getElementById("amountNeeded").value = 100;
}
}
<select id="homeSelector" name="HomeState" onchange="homeSelected()" required>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
<input id="amountNeeded" name="AmountNeeded" value="100" />
You can do this as follows:
<select name="HomeState" required onChange=myFunction(this)>
<option value="1">Alabama</option>
<option value="1">Alaska</option>
<option value="1">Arizona</option>
<option value="1">Arkansas</option>
<option value="5">California</option>
<option value="1">Colorado</option>
<option value="1">Connecticut</option>
<option value="1">Delaware</option>
</select>
Javascript code is:
<script>
function myFunction(x) {
val = x.options[x.selectedIndex].text;
if(val == 'California')
document.getElementsByName("AmountNeeded")[0].value = 300
else
document.getElementsByName("AmountNeeded")[0].value = 100
}
</script>
If else statement is good for you if you are sure that All other states have value 1 except California. If all states may have different values like some states may have 1 or some may have 2 or some may have 3, then there may be other alternatives to solve this like you can pass give one more attribute data-src-amount to options and give amount to data-src-amount. You can create options like <option value="1" data-src-amount="100">Alabama</option> and in script, you can fetch data-src-amount on select change event instead of if-else statement.
I have combo boxes with same name and ID. I want to focus first combo box.
How can I do this?
document.getElementById('test').focus();
This is the javascript code I was given to set the focus on the combo box but nothing happens.
I have a combo box like:
<select name="test" id="test">
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="1.00">1.00</option>
</select>
<select name="test" id="test">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
In my page I have the combo boxes like this with same name and ID.
Now I want to set focus to the first combo box .How can I do this using JavaScript?
You can't have mulitple elements with the same id!
try this:
HTML:
<select name="first" id="first">
<option value="0.25">0.25</option>
<option value="0.50">0.50</option>
<option value="1.00">1.00</option>
</select>
<select name="second" id="second">
<option value="t1">t1</option>
<option value="t2">t2</option>
<option value="t3">t3</option>
</select>
JavaScript:
document.getElementById('first').focus();
move select focus on the top row of function, before call all elements. example
function myfunc()
{
document.getElementById('myselect').focus();
document..........
}