<select id="kamal">
<option value"ACTIVE">a<option>
<option value"DISABLED">b<option>
<option value"DELETED">c<option>
</select>
I want to get the value displayed on the page..not the value shown in the option tag
I am interested in "aktiv" not "ACTIVE"
when i write document.getElementById("kamal").value;then the value that is select comes in the variable. But I want the displayed value.
Please help me how can I take this value.
NOTE: By using all the options given below, it will give me the value of the selected option, I want the label of the selected option. I mean the displayed value on html page.
The solution you are looking for is:
To get the value:
var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].value;
To get the text:
var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].text;
EDIT:
working example at:
http://jsfiddle.net/n85tW/6/
Try :
var sel = document.getElementById("kamal")
alert(sel.options[sel.selectedIndex].value);
Working example here
Note: your <option> tags should be closed with </option>
var element = document.getElementById("kamal");
var selectedValue = element.options[element.selectedIndex].innerHTML;
THis was the solution of my question.
Related
Hi I've been modifying a script that got the data from <span id=> to instead use a <option value=> from a dropdown list and it seems to work except for always choosing the first <option value=> in the list. If i arrange the order of the html list the first currency will be what it converts to onChange.
Here is the script and html
function ChangeCurrency() { $('select').click(function () {
var cc = $(this).children('option').attr('value').substring(1);
document.cookie = 'CurrencyId=' + cc + ';path=/';
var s = location.pathname;
if (s.length > 3 && s.substring(3, 4) == '/')
s = s.substring(3);
location.pathname = s;
})};
<select onchange="ChangeCurrency()">
<option value="c1">USD</option>
<option value="c2">EUR</option>
<option value="c3">AUD</option>
etc...
</select>
I don't know what I'm doing wrong? How can I get it to actually process a user selected option from the list (and hopefully keep that option displayed so the list doesn't show USD when the currency on the store is changed to AUD for example)
EDIT:
I need to keep how this code gathers data to "build" the cookie, I don't understand enough to know what string it is putting together from the option list to name the cookie but it is important for the store currency to work. This is the code that worked but the list was a div with span id for the option value. It took me a while to get it sort of working using option values rather than span id's except for being stuck on the first option in the list.
Your code just fetches the first option, not the selected one.
Change the:
var cc = $(this).children('option').attr('value').substring(1);
to:
var cc = $(this).val();
I have a Dropdown Select like this and would like to retrieve the Text of the selected option using D3.js
<select id = "dropdown">
<option value = "Activity1">Watch TV< /option>
<option value = "Activity2">Sleep</option>
<option value = "Activity3">Study</option>
</select>"
I can get the value of my selection by using :
var ActivityNumber = d3.select("#dropdown").property("value") ;
However i am am needing needing help to retrieve the text of the selection.
- Either "Watching TV" or "Sleep" or "Study" based on the browser selection..
Thank you in advance..
The CSS selector you need is 'option:checked'.
So to get the currently selected value using D3 with your markup you would use the following code:
const selectedText = d3.select('#dropdown option:checked').text();
I'm using JavaScript for an editable table in Bootstrap. Three of the columns are dictated by dropdown values. When the values are "saved" they are converted into their proper text values, but I'm having trouble keeping their saved dropdown choices as the "default" when they come back to edit.
For example:
They enter '3' in their dropdown and save it. If they want to go back and edit (likely another field in the table), the dropdown that once held 3 now goes back to the default of 1.
Here's my code for edit:
function Edit() {
var par = $(this).parent().parent(); //tr
var tdDate = par.children("td:nth-child(1)");
var tdCellNum = par.children('td:nth-child(2)');
var tdButtons = par.children("td:nth-child(3)");
tdDate.html("<input type='date' id='txtDate' value='"+tdDate.html()+"'/>");
tdCellNum.html("<select id='txtCellNum'><option value=1>1</option>
<option value=2>2</option><option value=3>3</option></select>");
tdButtons.html("<img src='save.png' class='btnSave'/>");
Any idea on how to get the value from tdCellNum to display as the default in the dropdown?
I've tried setting the value of select =tdCellNum and tdCellNum.val and using Number to convert the object to a number.I've also tried setting a var=tdCellNum with the rest of the variables, then document.getElementById("tdCellNum").value=copyValue.html(); along with tdCellNum.val=copyValue but all to no avail.Any ideas?? Thanks!
Better to create the element and append it. This way you can use .val() to select the option.
var sel = $("<select id='txtCellNum'><option value=1>1</option><option value=2>2</option><option value=3>3</option></select>");
sel.val(tdCellNum.text());
tdCellNum.empty().append(sel);
You can use tdCellNum.text() to get the value in the field.
Then you could do:
tdCellNumInt=tdCellNum.text();
tdCellNum.html("<select id='txtCellNum'><option value=1>1</option> <option value=2>2</option><option value=3>3</option></select>");
tdCellNum.find("option[value='"+tdCellNumInt+"']").prop("selected",true);
I have a select Box for selecting country code :-
<div class="selectWrap">
<select name="countryCode" id="countryCode"></select>
</div>
It gets populated using javascript and gets options like follows :-
<option data-phone-code="+91">91 (India)</option>
Now I want to select the value only +91.
I was trying this
var country = document.getElementById("countryCode");
var prefix = country.options[country.selectedIndex].value;
But this returns the Full value with Country.
How can I achieve this ?
Use getAttribute, for example:
country.options[country.selectedIndex].getAttribute('data-phone-code');
<select id="editSkillList">
<option id="0">Select</option>
<option id="8">text1</option>
<option id="5">text2</option>
<option id="4">text3</option>
</select><br><br>
Javascript code
document.getElementById("editSkillList").selectedIndex="2";
But i want set selected using option id.Is it posible? then please help me
You can just set the selects value to the text you get from the option after targeting the ID
document.getElementById("editSkillList").value = document.getElementById('4').innerText;
FIDDLE
EDIT:
If the options have a value, you just set the selects value to one of the options value
document.getElementById("editSkillList").value = document.getElementById('4').value;
You can do:
document.getElementById('5').selected = true;
Replace '5' with the id of the option you need to select.
you can select your option using below code.
Javascript
document.getElementById("editSkillList").value = document.getElementById('4').value;
or you can use this code also.
var editSkillList = document.getElementById("editSkillList");
editSkillList.options[editSkillList.selectedIndex].value;
i hope it will help you.