How to get the select box values in a variable - javascript

i have a selectbox which have values from 1 to 4 and I need to put the value I select in a javascript variable and send it in a function.Here is the way I am trying to do that..
<form enctype="application/json" method="post">
<select id="select" name="options">
<option>Choose Your Option</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
</select>
<input type="submit" value="submit" onclick="aMethod()"/>
I need this values in a variable and want to put that value in this method so that I can use that.can anybody help

You can retrieve the selected value like this:
var val = document.getElementById("select").value;
Working demo: http://jsfiddle.net/jfriend00/ah7TU/

You can do it like this:
var select = document.getElementById('select');
var value = select.value;
FIDDLE

Related

Get the value of Select dropdown list when the value sent by the form and that appearing in the dropdown list are different

I have a form which has the following Select dropdown list.
<select name="some_options" id="some_options">
#foreach(options as option)
<option value="{{$option->id}}">{{$option->value}}</option>
#endforeach
</select>
Here , the data are being sent from the database via the Controller
The Select data look like this
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
Now, I have another disabled field which should get the value once the user changes the select option
<div>
<input type="text" id="some_options_cng" disabled>
</div>
My Javascript code
var opt = $('#some_options').val();
$('#some_options').on('change',function(){
opt = $('#some_options').val();
$('#some_options_cng').val(opt);
});
Now, the value in the <disabled> input field shows as
opt001 or opt002 and so on.
I want to show values as
Value 1 or Value 2.
How do I do it?
This code will work.
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text(); //This line of code is
//important
$('#some_options_cng').val(opt);
})
$(document).ready(function(){
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text();
$('#some_options_cng').val(opt);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
<div style="height:5px;"></div>
<div>
<input type="text" id="some_options_cng" disabled>
</div>

Get selected value of datalist option value using javascript

I need to add some values from a HTML5 DataList to a <select multiple> control just with Javascript. But I can't guess how to do it.
This is what I have tried:
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option label="Red" value="1">
<option label="Yellow" value="2">
<option label="Green" value="3">
<option label="Blue" value="4">
</datalist>
<button type="button" onclick="AddValue(document.getElementById('AllColors').value, document.getElementById('AllColors').text);">Add</button>
<select id="Colors" size="3" multiple></select>
function AddValue(Value, Text){
//Value and Text are empty!
var option=document.createElement("option");
option.value=Value;
option.text=Text;
document.getElementById('Colors').appendChild(option);
}
This should work. I have moved the value selection logic into the method itself.
You will only get the value from the input. You will need to use the value to select the label from the datalist.
function AddValue(){
const Value = document.querySelector('#SelectColor').value;
if(!Value) return;
const Text = document.querySelector('option[value="' + Value + '"]').label;
const option=document.createElement("option");
option.value=Value;
option.text=Text;
document.getElementById('Colors').appendChild(option);
}
Here is the working demo.
You can check the trimmed value of the input. If value is not empty then you can get the selected data list option by matching the value attribute with querySelector().
Try the following way:
function AddValue(el, dl){
if(el.value.trim() != ''){
var opSelected = dl.querySelector(`[value="${el.value}"]`);
var option = document.createElement("option");
option.value = opSelected.value;
option.text = opSelected.getAttribute('label');
document.getElementById('Colors').appendChild(option);
}
}
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option label="Red" value="1"></option>
<option label="Yellow" value="2"></option>
<option label="Green" value="3"></option>
<option label="Blue" value="4"></option>
</datalist>
<button type="button" onclick="AddValue(document.getElementById('SelectColor'), document.getElementById('AllColors'));">Add</button>
<select id="Colors" size="3" multiple></select>
To get the selected options's ID in datalist, you can use this code too.
<input id="SelectColor" type="text" list="AllColors">
<datalist id="AllColors">
<option value="Red" id=1></option>
<option value="Yellow" id=2></option>
<option value="Green" id=3></option>
<option value="Blue" id=4></option>
</datalist>
<script>
$("#SelectColor").change(function(){
var el=$("#SelectColor")[0]; //used [0] is to get HTML DOM not jquery Object
var dl=$("#AllColors")[0];
if(el.value.trim() != ''){
var opSelected = dl.querySelector(`[value="${el.value}"]`);
alert(opSelected.getAttribute('id'));
}
});
</script>

jQuery get the <select> value rather than the selected <option> value

In the above example the console logs a value of 1 which is the currently selected option. How can you log the <select> tag's value of 2?
$(document).ready(function() {
console.log($('.mySelect').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mySelect" value="2">
<option value="1" selected>Choice 1</option>
<option value="2">Choice 2</option>
<option value="3">Choice 3</option>
</select>
This is not valid HTML syntax.
Use data attributes like data-someattr for values you want to pass.
This would work for you .
console.log( $('.mySelect[value=2]').val() );

Math formulas from option values

Please help me with this solution. I have simple form:
<select id="select-1" name="select-1">
<option value="0"> option 1</option>
<option value="1"> option 2</option>
</select>
<select id="select-2" name="select-2">
<option value="1"> option 1</option>
<option value="2"> option 2</option>
<option value="3"> option 3</option>
</select>
Below this form i want display dynamically calculation like this:
option from select-1 is in array (e.g. value[0]=1.50, value[1]=5)
option from select-2 is option value from list
In start result: value[0]=1.50 * 1 = 1,50
after change select result will change dynamically.
Angular is neccessary or only JS?
You have to set the value of each option of your select-2 with a "on-change event" on select-1.
In your on-change function you have to get the value of the select-1 and set the different values for your select-2.

How do I use jquery to set the values and text of a dropdown box from variables?

Say I have these variables:
var value1 = '';
var textvalue1 = '';
...
How do I use jquery to set the values and text of a dropdown box from these variables?
<div id"lang">
<form name="languages" id="langSelector">
<select name="file" size="1" target="_blank">
<option value="VALUE">TEXT</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</form></div>
$('#lang').find('option').eq(0).attr('value',0)
$('#lang').find('option').eq(0).attr('text','whatever')
adjust eq(0) to the position of the index you require.
$("option:eq(0)").val(textvalue1);
or you can use nt-child instead of eq

Categories