How to access a form drop down from Javascript - javascript

Is there a way to access a drop down options text using JavaScript?
For instance I can access the value by doing:
document.getElementById("transFrom").value;
But I want the text between the option tags.
Here is the HTML of a form drop down:
<select name="transFrom" id="transFrom" style="width: 300px;" tabindex="1" onfocus="return validate_field(this)" onchange="return validate_field(this)">
<option value="">Select An Account</option>
<option value="S">Savings</option>
<option value="C">Checking</option>
<option value="M">Money Market</option>
</select>


try
document.getElementById("transFrom").options[document.getElementById("transFrom").selectedIndex].text


If you are interested, you could use jQuery:
$('#transFrom').val();
http://docs.jquery.com/Attributes/val
I (along with thousands of others) have found jQuery to be extremely useful for many simple and complex javascript calls/functions. It's a fairly small include file for the amount of benefit you get.

Related

JQuery - Country code with fully customization

<div class="box">
<select class="ignore">
<option value="1">Some option</option>
<option value="2">Another option</option>
<option value="3" disabled>A disabled option</option>
<option value="4">Potato</option>
</select>
</div>
I'm trying to create a country phone code drop-down with customization.
Here I'm trying to use jquery-nice-select plugin. What I want to know is, is it possible to create country phone code selector using jquery-nice-select plugin? I didn't get a way for that, so can you guys can help me? I have attached my HTML code above.
https://hernansartorio.com/jquery-nice-select/

asp.mvc editable dropdownlist box (combobox)

I am looking for a solution to an issue I have with a current MVC 4 project I am working on. I would like to have an editable dropdownlist control, or combobox as I think this type of control is sometimes called. Where the control would operate as a typical dropdown control, but allow the user to type in a value that is not present in the dropdown list. I have had no luck with my search so far so I am hoping that this great community of developers could point me in the right direction. Thanks!

If you use HTML then you can use input with datalist attribute
Example:
<input type="text" name="fieldName" list="valueList"/>
<datalist id="valueList">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>

A drop down select that's actually a text input box, like on Google Calendar?

I noticed Google calendar uses this instead of <select>
<input class="text dr-time" id=":3r-st" size="7" title="From time" tabindex="0" dir="ltr" />
It let's the user type the time instead of selecting an option from the drop down list. Is there a plugin or nice widget someone wrote that does the same thing?

You might want to have a look at one of these JQuery plugins:
http://ivaynberg.github.io/select2/
http://brianreavis.github.io/selectize.js/
http://harvesthq.github.io/chosen/
A more lightweight approach might be, assuming you only have text and not dates, using the data-list attribute:
<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>
I copied the above code from here: https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist

Maybe Chosen is something for you. It's a JavaScript SELECT replacement, which adds multiple new opportunities:
http://harvesthq.github.io/chosen/

Select or free text

is there any JavaScript / jquery library to turn an input into a select where the "other" option is a free text? Or do I have to write it by myself? Thanks

You may consider using jQuery UI Autocomplete. That way it will allow arbitrary text and will show a drop down that is filtered by user input (if it is relevant to your situation).

try the following-
javascript function as follows:
function changeselect()
{
var mdiv=document.getElementById('other');
var cdiv=document.getElementById('select');
if(cdiv.options[cdiv.selectedIndex].value=='other')
{
mdiv.style.visibility='visible';
}
else
{
mdiv.style.visibility='hidden';
}
}
HTML as follows:
.......
<select id="select" name="select" onChange="changeselect()">
<option value"please">Please select One</option>
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="other">Other</option>
</select>
<INPUT id="other" type="text" name="other">
...........

The dojo toolkit offers a full set of custom form widgets. The ComboBox would work in your case (see also the FilteringSelect)

jquery Setting option selected with known value

I have the next select:
<select name="priority" id="priority" class="update_priority">
<option value="root" label="Without parent">Without parent</option>
<option value="72" label="Rank3">Rank3</option>
<option value="71" label="Rank1">Rank1</option>
<option value="67" label="Rank2">Rank2</option>
<option value="64" label="Rank4">Rank4</option>
</select>
In JS i have a variable with something value. For example:
selected = 71;
Now, with help of jQuery I want to make option selected with this value(in our example 71).

you don't need jquery for this. you can just use plain old javascript:
document.getElementById("priority").value = "71";
But if you still want to with jquery you can do the same thing:
$("#priority").val("71")
EDIT: Here is an example. You can comment out either one you want to see the other one work:
http://jsfiddle.net/BupWA/

Categories

Resources