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.

datalist how to tell if input is one of the options

I was wondering why why I select 2 with a select tag it returns true in the console. But Whenever I select 2 in the datalist it returns false in the console.
In short I need the datalist to return tru. I need to it be true so that when the user enters in the input I can ensure that the user has enter in a option I wanted (one of the drop down menu options )
function castvote() {
var selected = document.getElementById('vote');
console.log("Chrome" in selected);
}
<input list="vote" onchange="castvote()" id="voteInput">
<datalist id="vote" >
<option value="Chrome">
</datalist>
<label>Choose a browser from this list:
<input id = "a" list="browsers" name="myBrowser"
style="width: 400px;" onclick="test()" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>

You should try this.
I just put (.children) at the getElementById() to get all children of datalist and the onChange() function put at the input tag.
<input list="vote" onchange="castvote()" id="voteInput">
<datalist id="vote" >
<option value="2">
<option value="3">
<option value="4">
<option value="5">
<option value="6">
</datalist>
<script>
function castvote() {
var datalist = document.getElementById('vote').children;
console.log("2" in datalist);
}
</script>

how do i post selected options in php and javascript

I'm trying to get the text of the selected value in HTML select box.
I've tried using onchange event but I realized it is messing up JavaScript calculations. Is there another way to get text of the selected value without interfering with the auto-calculation function?
<select style="width: 300px;" name="typeofdocument" class="form-control" onchange="getText(this)" onchange="javascript:doOrderFormCalculation();" onclick="javascript:doOrderFormCalculation();" id="typeofdocument">
<option value="1" >Essay</option>
<option value="2" >Term Paper</option>
<option value="3" >Research Paper</option>
<option value="4" >Coursework</option>
<option value="5" >Book Report</option>
<option value="6" >Book Review</option>
<option value="7" >Movie Review</option>
<option value="8" >Dissertation</option>

use this code for JQuery
$('#typeofdocument').change(function() {
console.log($(this).val());
javascript:doOrderFormCalculation();
});
and this for native JS
const selectElement = document.getElementById('typeofdocument');
selectElement.addEventListener('change', (event) => {
console.log(event.target.value);
javascript:doOrderFormCalculation();
});
and remove onchange, onclick

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
}