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)
Related
I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?
Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.
I make use of Mobiscroll jQuery script for a prettier input by the users. On page load, the first option of the select list is shown as selected. What should I add to the existing code that on page entrance, the (for example) 3rd value is shown as the default?
I tried selecte="selected" but it does not work.
this is the jQuery script
$(function(){
$('#city').scroller({
preset: 'select',
theme: 'android-ics',
display: 'inline',
mode: 'scroller',
});
});
and here is the options of the select box
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2">Berlin</option>
<option value="3">Boston</option>
</select>
You can easily set the value from jQuery by doing this:
var defaultValue = 3;
$("#city").val(defaultValue);
"3" here represents Boston from your drop down list, here's a fiddle for proof:
http://jsfiddle.net/6mj8n/5/
Using $('#city').val('3'); will put The third option 'Boston' as selected for example
In this case, I think the vanilla DOM method is what I'd go with:
$('#city')[0].options.selectedIndex = 3;
It should be mentioned that this and other solutions should be placed before you initialize mobiscroll. Working demo with mobiscroll: http://jsfiddle.net/DCaHK/1/
...On further thought, your first suggestion of adding selected to the option should have worked. Updated my demo to do exactly that. Autocomplete could prevent this from working properly in some browsers, so it's possible your issue is simply that you need to turn autocomplete off:
<form autocomplete="off">
<select id="city" class="cities" data-role="none" name="City">
<option value="">All</option>
<option value="1">Atlanta</option>
<option value="2" selected>Berlin</option>
<option value="3">Boston</option>
</select>
</form>
I have a set of dropboxes
code is
<fieldset data-role="controlgroup" data-type="horizontal">
<!--<legend> </legend>-->
<select name="select-widget" id="select-widget">
<option value="Widget">Widget</option>
</select>
<select name="select-nbl" id="select-nbl">
<option value="NBL">NBL</option>
<option value="HSM">HSM</option>
<option value="TERR">TERR</option>
<option value="KEY_ACCOUNT">KEY ACCOUNT</option>
</select>
<select name="select-level-focus" id="select-level-focus">
<option value="LEVEL">LEVEL</option>
<option value="FOCUS">FOCUS</option>
</select>
<select name="select-wdg" id="select-wdg">
<option value="WDG">WDG</option>
</select>
<select name="select-wds" id="select-wds">
<option value="WDS">WDS</option>
</select>
</fieldset>
No I want to remove exixsting selectbox or add new select box to it on change of "select-nbl" or "select-levelfocus"
How to do it using jquerymobile
This has little to do with jQuery mobile, that's merely a mobile framework. The event listeners and DOM manipulation you want to do here is still handled by jQuery.
Anyways, how do you do it?
Well, you have your event listeners:
$('#select-nbl').change(function() {
#Do something
});
And you can hide stuff:
$('#select-wdg').parents('.ui-select').hide();
The use of parents() is to take care of the extra styling jQuery mobile puts in there.
You can't easily add select boxes to jQuery mobile, but if they're hidden, you can show them.
$('#select-wdg').parents('.ui-select').show();
All this is action: http://jsfiddle.net/luhn/Vgc4g/9/
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/
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.