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..........
}
Related
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);
i wanted to create Bookmarklet which i key-in input, then it search and select from dropdown list in webpage.
i have some code below, but it not working.
thanks.
<select name="ctl00$ContentPlaceHolder1$dtgLot" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$dtgLot\',\'\')', 0)" id="ctl00_ContentPlaceHolder1_dtgLot" style="width:200px;">
<option selected="selected" value=""></option>
<option value="!E625163.05">!E625163.05</option>
<option value="1E001196">1E001196</option>
<option value="1E001242.08">1E001242.08</option>
<option value="1E001492.03">1E001492.03</option>
<option value="1E001493.02">1E001493.02</option>
</select>
Bookmarklet code
javascript:document.getElementsByName("ctl00$ContentPlaceHolder1$dtgLot")[0].value = 1E001196;document.getElementsByName("ctl00$ContentPlaceHolder1$dtgLot")[0].onchange();
javascript:document.querySelector(`select[name="ctl00$ContentPlaceHolder1"] option[value="${prompt('Search value:')}"]`).value = true
I have a html dropdown field where there should be a text field added at the bottom naming other.The text typed in this field should come as other:text
drop down html is :
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
Here other should be text field.For understanding i kept other as option,but i want that to be a input text field where value is given by user.
Thanks in advance
You could add hidden input field by default for other text :
<input type='text' id='other' name='other' style="display:none"/>
And capture the change on select in your js then check if selected option value equal Other and show the field or hide it :
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
Hope this helps.
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
you could go the other way and make all options accessible by the text field - but giving an autocomplete option as the user types. This can be done with jQuery autocomplete plugins etc or the new html5 datalist. This ties a predetermined set of options to the textfield - allowing the user to select from it if theinput value matches the value, but also allows for alternative text to be entered if there are no matches. Just note though that Safari (and possible other browsers) do not support this feature yet. But its very cool when it is supported.
<input id="transportOptions" list="transport">
<datalist id="transport">
<option value="Car">
<option value="Bike">
<option value="Scooter">
<option value="Taxi">
<option value="Bus">
</datalist>
I have this select on my page:
<select id="myselect">
<option value="car" selected="true">Car</option>
<option value="bike">Bike</option>
<option value="plane">Plane</option>
</select>
I need the selected option to be bike ... how do I change it using jQuery?
I've tried:
$("#myselect option:selected").val('bike');
and
$("#myselect").val('bike');
But they don't work
I just created a dummy button to change the selected on click of it. Here is the code
HTML
<select id="myselect">
<option value="car" selected="true">Car</option>
<option value="bike">Bike</option>
<option value="plane">Plane</option>
</select>
<button id="cS">
Change Selected
</button>
JS
$("#cS").on('click',function(){
$('#myselect option[value="bike"]').attr('selected',true)
})
WORKING EXAMPLE
I need your help.
How can I make a function to check and see if a single or combination of selections has been made in any of the 3 boxes and alert me back with any of the resultant combination of messages below:
if a single selection has been made in any of the 3 dropdown boxes: "searching the database by [selectbox] only"
if a selection has been made in any 2 drop down boxes "searching the database by [selectbox] and [selectbox]
if a selection has been made in all 3 drop down boxes "searching the database by [selectbox], [selectbox], and [selectbox]
here is the setup:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Firtsname (x)<br>
<select id="firstname">
<option value=""></option>
<option value="John">John</option>
<option value="Jacob">Jacob</option>
<option value="Nancy">Nancy</option>
<option value="Loretta">Loretta</option>
</select>
<br>
Lastname (y)<br>
<select id="lastnname">
<option value=""></option>
<option value="Pearson">Pearson</option>
<option value="Black">Black</option>
<option value="Scott">Scott</option>
<option value="Murray">Murray</option>
</select>
<br>
Age (z)<br>
<select id="age">
<option value=""></option>
<option value="30">30</option>
<option value="25">25</option>
<option value="45">45</option>
<option value="39">39</option>
</select>
<br>
<br>
<input type="button" value="testit">
</body>
</html>
To Read Select Option Value
$('#selectId').val();
To Set Select Option Value
$('#selectId').val('newValue');
To Read Selected Text
$('#selectId>option:selected').text();
In the #selectId, put your html element's id and you should be fine!