I want to get the value of the selected option from a dropdown list, in D3.js.
<select>
<option data-graph="1">1</option>
<option value="2">2</option>
</select>
I have seen this question which explains how to get the value when the select changes:
d3.select("#myselect").on("change", change)
function change() {
this.options[this.selectedIndex].value
}
But how can I get the selected value on page load, not when the select is changed?
I found this to be the simplest:
d3.select("#objectID").node().value;
Which is the text of the selected option in the following node: <select id="objectID"></select>
Note that d3.node() is documented at https://github.com/mbostock/d3/wiki/Selections#node and the .value property of an HTMLInputElement is documented on MDN at https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement.
Use the .property() method:
d3.select("#objectID").property("value")
You don't need to use D3 to do that:
var sel = document.getElementById('myselect');
console.log(sel.options[sel.selectedIndex].value)
I've also seen
d3.select("#objectID")[0][0].value
But I'm quite sure this is generally a bad idea...
Related
I have a select box that originally has no value selected. The box shows as empty, and I would like a cypress test to check that there is no currently selected option, basically check that the select box displays no value.
How can I do that? I tried something like this:
cy.get('#filter-dropdown').should('have.text', '')
But this doesn't work because the text that it checks is a concatenation of all of the options together.
This is the HTML:
<select data-v-1="" id="filter-dropdown"
<option data-v-11d8b3dc="" value="a23"> Add Test </option>
<option data-v-11d8b3dc="" value="532"> Algo</option>
<option data-v-11d8b3dc="" value="732"> Another</option>
</select>
Edit: this is the same question I have, but the answer does not resolve the issue, probably why the answer was not accepted...
Stack Overflow
You can apply an assertion like this:
cy.get('#filter-dropdown')
.invoke('val')
.then((val) => {
expect(val).to.be.null
})
an option can be just an object instead of a list of objects?
in the documentation each sweeps a list but I would like to retrieve a single object
<select th:field="*{type}">
<option th:each="type : ${allTypes}"
th:value="${type}"
th:text="#{${'seedstarter.type.' + type}}">Wireframe</option>
</select>
is possible do somethint like
<option th:each="${Types}"
The Standard Dialect in thymeleaf offers Using th:each. Its the Iteration basics.
“for each element in the result of evaluating ${allTypes}, repeat this fragment of template setting that element into a variable called type”.
Dropdown Selector usually is for a list of options to be displayed.
You simply cant do th:each="${Types}", as you need to declare a variable to access the iterated variable
https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#using-theach
I would like to translate the options of my select but I do not know how to do that :
<select>
<option repeat.for="element of elementList" model.bind="element.id">
${element.value} <== How to translate the value ?
</option>
</select>
Could you please help me ?
The value would have to be a key in your translation file. Then you'd simply use the t binding behavior:
${element.value & t}
This would work for a model.bind expression as well, but that might not be what you want.
For the following XMl file,
<select id="pet" title="Pet" class="x8" onchange="" name="pet">
<option></option>
<option selected="" value="abc">Dog</option>
<option value="def">Cat</option>
<option value="ghi">Rabbit</option>
</select>
What is the Xpath to be able to get the value of the option with "Selected" property? (I need to get "abc")
One possible way to get value attribute of option element having selected attribute :
/select/option[#selected]/#value
That would take all options
/select/option
That would take 2-nd option and read value attribute from it.
/select/option[2]/#value
So I have a dropdown and I am using angular to build it. Minutes is an array of numbers [0,1,2....59]. The filter is a simple filter that displays the digits from 0-9 as 00, 01... etc.
<select ng-model="addObj.StartMinute"
ng-options="m as m | pad2Digit for m in Minutes"
required
name="startMinute">
<option value="">-- select --</option>
</select>
My problem is that this ALWAYS reports being valid. I have removed the option in there that lets me customize the option used when no match is found, and that doesn't change it. I have tried setting StartMinute to null, -1 and undefined and still the select ALWAYS says it is valid.
I have found so far that the problem has to do with my using simple numbers rather than binding to objects. In cases where I am doing a dropdown with more a collection of objects, required validation is correctly detecting that nothing is chosen. I would have thought that setting the initial value on the above dropdown to null would work, but it isn't. So does anyone know how to use required validation on a dropdown that is bound to an array of numbers?
There must be something else on the project where it wasn't working making this not work because the raw jsfiddle I threw together to try to demo the problem works properly. If the initial value is null, then the validation does fail like I would expect.
HTML
<div ng-app="app">
<div ng-controller="ctrlDropdown">
<form name="testForm">
<select ng-model="number1"
ng-options="num for num in numbers"
required
name="ddl1">
<option value="">- select - </option>
</select>
<br/>failsValidation: {{testForm.ddl1.$error.required}}
</form>
</div>
</div>
JS
var app = angular.module("app",[]);
app.controller("ctrlDropdown",function($scope){
$scope.test = "wee";
$scope.number1 = null;
$scope.numbers=[1,2,3,4,5,6];
});
http://jsfiddle.net/NBhTT/