We Keep Coding

How get the Value of DropDown in TypeScript

I have a drop down list in my MVC view as :
<select id="organization" class="create-user-select-half"></select>
I try to get the value of dropdown in Type Script like this:
var e = (<HTMLInputElement>document.getElementById("organization")).value;
but it return empty, this is how I get the textbox value and it is working. Also I tired this code but options and selectedIndex are undefined.
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

You need to use the HTMLSelectElement instead, but this can be tricky
var e = (document.getElementById("organization")) as HTMLSelectElement;
var sel = e.selectedIndex;
var opt = e.options[sel];
var CurValue = (<HTMLSelectElement>opt).value;
var CurText = (<HTMLSelectElement>opt).text;
You will need to define the value or text though if you want anything back
'<select id="organization" value="ThisIsMyValue">This is my text</select>
Output
CurValue = "ThisIsMyValue"
CurText = "This is my text"

You only need this line of code:
let value = (<HTMLSelectElement>document.getElementById('organization')).value;

This worked for me:
const target = e.target as HTMLSelectElement
console.log("%s is selected", (target[clickedIndex] as HTMLOptionElement).value)

I'm using Angular 9 and the following worked for me:
(document.getElementById("inputCategory") as HTMLSelectElement).value
My suggestion is for you to refactor your statement to:
var e = (document.getElementById("organization") as HTMLSelectElement).value
Happy coding!

Try this
In HTML:
<select #organization (change)="selectOrganization(organization.value)" class="create-user-select-half">
<option *ngFor="let o of organizationList"
[value]="organization.id"
[selected]="organizationFromDB == o.organization_name">
{{ o.organization_name }}
</option>
</select>
In TS:
selectOrganization(id) {
console.log('id', id);
}

You can use the $any typecast function
$any($event.target).value
Which will stop the type checking in the template
In below code updatePageSize takes a number as argument:
<select (change) = "updatePageSize($any($event.target).value)">
<option selected = "true">5</option>
<option>10</option>
<option>20</option>
<option>50</option>
</select>
Credits:https://www.tektutorialshub.com/angular/property-value-does-not-exist-on-type-eventtarget-error-in-angular/

How do I find a dropdown value from a dropdown label

Suppose I have a dropdown as
<select name="Countries" id="Countries">
<option value="USA">United States of America</option>
<option value="AUS">Australia</option>
</select>
Suppose on load of a page I get a sample text as "Australia" then I want to get its respective value as "AUS"
I want to get dropdown value from its label.

Would be something like this:
var e = document.getElementById("Countries");
var str = e.options[e.selectedIndex].value;

Thanks to everyone who helped me here.
Below is the solution to get label from the selected value of a droddown.
var e = document.getElementById("Countries");
var str = e.options[e.selectedIndex].innerHTML;

http://jsfiddle.net/mm18qrwd/1/
I think you don't have index of selected element,
hence,
var value = "";
Array.prototype.slice.
call(document.
getElementById("Countries").
options).
forEach(function(option){
if(option.text == "Australia") {
value = option.getAttribute("value")
}
})
alert(value);

if you are using JQuery, this code $('#Countries').val() will return what you want.

Get data attribute for selected dropdown options

I'm trying to post a custom data attribute on a select box option to a hidden form field.
Here's my html:
<select id="sampleorder" multiple="multiple">
<option value='xxx' data-amount='5'>Name</OPTION>
<option value='xxx' data-amount='15'>Name</OPTION>
<option value='xxx' data-amount='2'>Name</OPTION>
</select>
And jQuery
$('#submit_btn').click(function() {
var options = $('select#sampleorder');
var samplesSelected = options.val();
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});
I'm guessing that my variable "sampleAmount" should look somewhat like this
var sampleAmount = options.val().data("amount");
But it's not giving me the expected results.
What would be a good approach to get the data attribute value per item?
Thanks!

why use jQuery? Just use event.target.options[event.target.selectedIndex].dataset.amount

Try this:
$('#submit_btn').click(function() {
var samplesSelected = $('#sampleorder').val(),
sampleAmount = $('#sampleorder option:selected').data("amount");
$('input[name=order]').val(samplesSelected);
$('input[name=quantity]').val(sampleAmount);
});

In pure vanilla javascript you can use :
var sampleAmount = this.selectedOptions[0].getAttribute('data-amount'));
Example:
function SelectChange(event) {
console.log(event.selectedOptions[0].getAttribute('data-amount'));
}
<select onchange="SelectChange(this)">
<option data-amount="1">one</option>
<option data-amount="2">two</option>
<option data-amount="3">three</option>
</select>

Try this,
HTML
Add id attribute to your select drop down
like
<select id="sampleorder" >
....
SCRIPT
var sampleAmount = $('select#sampleorder option:selected').data("amount");
Fiddle http://fiddle.jshell.net/3gCKH/

Another vanilla JS answer:
var selectContainer = document.getElementById('sampleorder')
var selectedOption = selectContainer.selectedOptions.item()
var amount = selectedOption.getAttribute('data-amount')

I forgot to mention it has to be a multi select box, sorry.
With your help and a brief look into the jQuery documentation I've managed to solve it:
$("select#sampleorderm").change(function () {
var samplesSelected = options.val().join("::");
var samplesAmount = "";
$("select#sampleorderm option:selected").each(function () {
samplesAmount += $(this).data("amount") + " ";
});
$('input[name=sampleorder]').val(samplesSelected);
$('input[name=sampleorderquantity]').val(samplesAmount);
});

Retrieving the value of a specific attribute via javascript for the onChange attribute

Good morning/afternoon,
Not so much a problem but more of a query. If I have the following code to grab hold of the users selection on a drop-down box (see figure 1), how do I also add the ability to also grab the value of a specific attribute? (see figure 2)
Figure 1:
<select onChange="productString(this.value)">
<option selected>Please Choose an Option</option>
<option value="Foo"></option>
</select>
Figure 2:
<select onChange="productString(this)">
<option selected>Please Choose an Option</option>
<option value="Foo" id="Bar"></option>
</select>
If anyone would be so kind as too show me where I am going wrong in figure 2 it would be greatly appreciated.
Thanks in advance,
Dan.
EDIT:::::
Would the following work it collecting the information?
function productString(element) {
var id = element.value;
var name = element.id;
var box = element.class;
}

Just pass though this:
<select onChange="productString(this)">
and then you can get whatever you want:
function productString(element) {
var value = element.value, id = element.id;
// ...
}
Here is a sample jsfiddle.
edit — oops sorry - the element that's being passed through is, in IE everywhere (gee I must be blind), the "select" element, not the "option". Thus:
function productString(element) {
if (element.tagName.toLowerCase() === 'select')
element = element.options[element.selectedIndex];
var id = element.id;
var value = element.value;
// ...
}
Updated jsfiddle.

Search a dropdown

I have this HTML dropdown:
<form>
<input type="text" id="realtxt" onkeyup="searchSel()">
<select id="select" name="basic-combo" size="1">
<option value="2821">Something </option>
<option value="2825"> Something </option>
<option value="2842"> Something </option>
<option value="2843"> _Something </option>
<option value="15999"> _Something </option>
</select>
</form>
I need to search trough it using javascript.
This is what I have now:
function searchSel() {
var input=document.getElementById('realtxt').value.toLowerCase();
var output=document.getElementById('basic-combo').options;
for(var i=0;i<output.length;i++) {
var outputvalue = output[i].value;
var output = outputvalue.replace(/^(\s| )+|(\s| )+$/g,"");
if(output.indexOf(input)==0){
output[i].selected=true;
}
if(document.forms[0].realtxt.value==''){
output[0].selected=true;
}
}
}
The code doesn't work, and it's probably not the best.
Can anyone show me how I can search trough the dropdown items and when i hit enter find the one i want, and if i hit enter again give me the next result, using plain javascript?

Here's the fixed code. It searches for the first occurrence only:
function searchSel() {
var input = document.getElementById('realtxt').value;
var list = document.getElementById('select');
var listItems = list.options;
if(input === '')
{
listItems[0].selected = true;
return;
}
for(var i=0;i<list.length;i++) {
var val = list[i].value.toLowerCase();
if(val.indexOf(input) == 0) {
list.selectedIndex = i;
return;
}
}
}
You should not check for empty text outside the for loop.
Also, this code will do partial match i.e. if you type 'A', it will select the option 'Artikkelarkiv' option.

Right of the bat, your code won't work as you're selecting the dropdown wrong:
document.getElementById("basic-combo")
is wrong, as the id is select, while "basic-combo" is the name attribute.
And another thing to note, is that you have two variable named output. Even though they're in different scopes, it might become confusing.

For stuff like this, I'd suggest you use a JavaScript library like jQuery (http://jquery.com) to make DOM interaction easier and cross-browser compatible.
Then, you can select and traverse all the elements from your select like this:
$("#select").each(function() {
var $this = $(this); // Just a shortcut
var value = $this.val(); // The value of the option element
var content = $this.html(); // The text content of the option element
// Process as you wish
});