Develop Reference

How to use selected in option attribute in name attribute using Javascript or jQuery?

I want to use “selected” in option attribute in name attribute using Javascript or jQuery. It means I want to use name="1" option as selected one when the page is loaded. I tried with the below code. But it not workes.
Code:
<select id="countryselect" name="country">
<option value="1" name="0">Afghanistan</option>
<option value="2" name="0">Albania</option>
<option value="3" name="0">Algeria</option>
<option value="4" name="1">Malaysia</option>
<option value="5" name="0">Maldives</option>
</select>
Jquery:
$("#countryselect").$('option[name="1"]')
Demo: http://jsfiddle.net/muthkum/zYRkC/
Thank you.

You can pass a second parameter to the selector to define the scope
$('#countryselect').val($('option[name="1"]', "#countryselect").val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="countryselect" name="country">
<option value="1">Afghanistan</option>
<option value="2" name="1">Albania</option>
<option value="3">Algeria</option>
<option value="4">Malaysia</option>
<option value="5">Maldives</option>
</select>

Just put this line of code in your script-tag and it will work like you want.
$('#countryselect option[name="1"]').attr('selected',true);

If you want to go with dynamic assignment, you can go with
$("#countryselect").val(1) .
If selection of option is static and only want for initial load, then selected can be used for this like
<option value="4" selected>Malaysia</option>

You can try it out here
Please click on the link to see the code code pen link here
<select id="countryselect" name="country">
<option value="1" name="0">Afghanistan</option>
<option value="2" name="0">Albania</option>
<option value="3" name="0">Algeria</option>
<option value="4" name="1">Malaysia</option>
<option value="5" name="0">Maldives</option>
</select>
you ca use the selector to set the "selected" attribute like this:-
$("#countryselect option[name='1']").attr('selected', 'selected');

var nameVal = $('[name=1]').attr('value');
$("#countryselect").val(nameVal)
Codepen

You can try something like this
$("#countryselect option[value='3']").attr("selected","selected");
and if you want to select by name value then use
$("#countryselect option[name='0']").attr("selected","selected");
It will set the selected attribute on that option.

js: why selecting "select tag".target.type return "select-one" as a naming convention?

I'm trying to understand why when I select <select> and targeting any option
it return select-one . why -one? can it be in some cases counting more or sth else so naming convention have a useful meaning ?
in the code below I'm comparing between input and select maybe they'r not relevant but looks interesting.
$('input[type="checkbox"],input[type="radio"]').on("change",function(event){
console.log(event.target.type);
});
$('#foo,#foo2').on("change",function(event){
console.log(event.target.type);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="select">
<input type="radio" name="select">
<select id="foo">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
<select id="foo2">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>

It's to distinguish from the case of when you add the multiple optional attribute to the select. It will then return select-multiple.
multiple
This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can
be selected at a time. When multiple is specified, most browsers will
show a scrolling list box instead of a single line dropdown
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
$('input[type="checkbox"],input[type="radio"]').on("change",function(event){
console.log(event.target.type);
});
$('#foo,#foo2').on("change",function(event){
console.log(event.target.type);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="select">
<input type="radio" name="select">
<select id="foo">
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>
<select id="foo2" multiple>
<option value="1">Value1</option>
<option value="2">Value2</option>
</select>

How do I show option title from select menu in another spot

I am trying to get the title attribute from a selected Option in a Select menu. I have spent over a day on this and I am seeking help. I found a couple of ways to use the value attribute but now I need to use the title attribute somewhere else on the page.
Here is my current attempt although I have been through many iterations. I have listed two possible scripts although only one will eventually be used. The first possible script might include Jquery and if it does and it can be used here, can you translate it into Javascript, as I am not good at either? Do I have the elements in the correct order?
<select id="amount_id" onclick="function()">
<option value="" disabled="disabled">Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
$(document).ready(function(){
$(document).on('click','#amount_id',function(){
var result = $("option:selected",this).attr('title');
$("#displayTitle").text(result);
});
});
</script>
OR
<script>
function run(){
document.getElementById("displayTitle").value =
document.getElementById("amount_id").value;}
</script>
Thank you.

Here is a JavaScript alternative of the first code :
<select id="amount_id">
<!-- removed onclick -->
<option value="" disabled>Amount</option>
<option value="0" title="None">0</option>
<option value="1" title="One Quarter">1/4</option>
<option value="2" title="One Half">1/2</option>
<option value="3" title="Three Quarters">3/4</option>
<option value="4" title="All">100%</option>
</select>
<textarea id="displayTitle"></textarea>
<script>
document.getElementById("amount_id").addEventListener('change',function(){
var eTitle = this.options[this.selectedIndex].getAttribute('title');
document.getElementById("displayTitle").value = eTitle;
});
</script>

I need a simple dropdown menu OnChange/Select in javascript

I need help on something really simple.
I have 2 dropdown boxes on a form:
<select name="OfficeLocation" >
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
The second one is "Read Only"
All I need to know is how can I change the value of "OfficePhone" by changing the value of "OfficeLocation"? using either a simple JavaScript or JSP Command
Thanks

You are able to use a script like the following:
<script>
menu1 = document.getElementsByName('OfficeLocation')[0];
menu2 = document.getElementsByName('OfficePhone')[0];
menu1.onchange = function(){
menu2.value = menu1.value;
}
</script>
Here you are using the onchange event to initiate a function that make the value on the second menu menu2 equals to the selected value of the first menu menu1.
An online demo is here
Notice that: the script should be placed after your elements.

You gonna need an event handler function for the OfficeLocation select and an id for the second select.
<select name="OfficeLocation" onchange="eHandler">
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone" id="oPhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
You have to implement your event handler in your script, like this:
function eHandler(){
var secondSelect = document.getElementById('oPhone');
secondSelect.value = //the value you want to be selected
}

Reset value of dropdown list with radio button

I need to reset the value of a dropdown list with a radio button. So when a certain radio button is selected, it will reset a specific dropdown list to the default selected="selected" option.
How can this be done with js and css?

This should reset your dropdown to the first option.
Here's the markup
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input onclick="resetFoo();" type="radio" name="bar" value="bar">
Here's the jQuery.
function doSomething {
$("#foo option:first").attr("selected", true);
}

Say that this is the code for your first element
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
your radio button should be something like this:
<input onclick="document.getElementById('foo').value = '';" type="radio" name="bar" value="bar">
The value under the onclick event needs to be replaced with the default value for your dropdown.

document.getElementById('select').selectedIndex = 0;
<input type="radio" onchange="doSomething()" />