D3.js: get text of selected dropdown option? - javascript

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();

Related

Javascript change currency always choosing first <option> from <select> dropdown list

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();

selecting proper value from attribute

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&nbsp(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');

Selected using option ID

<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.

Getting displayed value of select tag

<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.

Getting an option text/value with JavaScript

I am trying to build a form that fills in a person's order.
<form name="food_select">
<select name="maincourse" onchange="firstStep(this)">
<option>- select -</option>
<option text="breakfast">breakfast</option>
<option text="lunch">lunch</option>
<option text="dinner">dinner</option>
</select>
</form>
What I'm trying to do is send in the select object, pull the name and the text/value from the option menu AND the data in the option tag.
function firstStep(element) {
//Grab information from input element object
/and place them in local variables
var select_name = element.name;
var option_value = element.value;
}
I can get the name and the option value, but I can't seem to get the text="" or the value="" from the select object. I only need the text/value from the option menu the user selected. I know I can place them in an array, but that doesn't help
var option_user_selection = element.options[ whatever they select ].text
I also need to use the passed in select reference as that is how it's set up in the rest of my code.
Later on, that text/value is going to be used to pull the XML document that will populate the next select form dynamically.
You can use:
var option_user_selection = element.options[ element.selectedIndex ].text
In jquery you could try this $("#select_id>option:selected").text()
var option_user_selection = document.getElementById("maincourse").options[document.getElementById("maincourse").selectedIndex ].text
form.MySelect.options[form.MySelect.selectedIndex].value

Categories