I need to make an analog of the size attribute in the Select2 plugin as in the default select. I can't find it in the docks.
Here's how implemented in default
Sorry for English :)
In html you can use disabled ether on the entire selection or option as showing in your image, here is an example :
<select>
<option value="1" disabled>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4" disabled>option 4</option>
</select>
as you can see you can't select option 1 and 4
Related
Scenario: As mentioned in the below structure those are the elements which we have in our Website and Database. So when i click on Apple from website it selects apple and we can select how many or which kind of apple's a customer needs and does the same for the below fruits, But when we select "Citrus 1"
or "Citrus 2" it always selects the Option as Citrus and hence saves it under citrus.
My requirements: I need a Jquery which selects the correct selection from the below list when i click on that event.
Example:
<Option Number="01">Apple </Option>
<Option Number="02">Banana </Option>
<Option Number="03">Citrus </Option>
<Option Number="04">Citrus 1</Option>
<Option Number="05">Citrus 2</Option>
<Option Number="01">Apple </Option>
<Option Number="02">Banana </Option>
<optgroup label="Citrus">
<Option Number="03">Citrus 1</Option>
<Option Number="04">Citrus 2</Option>
</optgroup>
I've looked all over the place to try and find a way to somehow disable jQuery Mobile's selectmenu widget so that I can use a 3rd party library for a <select></select>. In my case, I want to use the Chosen library. Is there any way I can do this, while still retaining the rest of the jQuery Mobile styling on my page?
You can tell jQM to ignore the select by adding data-role="none"
<select id="mySelect" data-role="none" placeholder="Select an option..." >
<option value="">Select an option...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Here is a demo using the Selectize plugin for the select and other controls use jQM:
DEMO
I have a drop down list, which renders on the page like this:
<select id="DropDown">
<optgroup label="">
<option value="-1">
</option>
</optgroup>
<optgroup label="Group 1">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="11">Item 4</option>
<option value="12">Item 5</option>
</optgroup>
</select>
How can I use Javascript (with JQuery) to change the dropdown value? In past instances, I've iterated through the list of dropdown.options for the dropdown to find my desired value, and then set the select index based on that--but that option is not available to me with the optgroups there.
Dude, it's simple as this:
$('#id').val('the value you want to select');
In your example if you want to select:
<option value="2">Item 2</option>
Use this:
$('#DropDown').val('2');
You don't need to iterate anything, just assign the value and jQuery and the browser will do the rest.
EDIT:
I forgot http:// on the links. This is not my problem. I'll fix the question...
i have some options, like this:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option> <!--Default displayed--->
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
To this i have a jquery listener, looks like this:
$('.mySelect').change(function(){
window.location.replace($(this).val());
});
Since this just responds to a change made, i can't be redirected to "www.url1.com". What should i use? I only get suggestions for change on google.
EDIT 2: I've got a bunch of solutions on using a dummy as first option. I also got the other solution of using a button to read the selected option and then redirect, but that's not usable in the project i'm working on, even if these are really good solutions otherwise.
In this case, i want it to listen for usage, even if the change is made to itself, like i'm selecting the first option (that's selected by default) i want it to do something with it - In the case above a redirect. I'll leave it open if someone have a good solution to this problem.
Try putting in an empty valued first option:
<select class="mySelect">
<option value="">Please select...</option>
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
You can then amend your jQuery to make sure there is a value before redirecting:
$('.mySelect').change(function(){
var value = $(this).val();
if (value != "") {
window.location.replace(value);
}
});
Example fiddle
Note also that http:// (or whichever protocol you're using) is required on the link values.
Updated
If you would prefer to not have the dummy option, you would need to change the logic to work on button click:
<select class="mySelect">
<option value="http://www.url1.com">Url 1</option>
<option value="http://www.url2.com">Url 2</option>
<option value="http://www.url3.com">Url 3</option>
</select>
<button id="redirect">Go</button>
$("#redirect").click(function() {
window.location.replace($(".mySelect").val());
});
You have to put http:// also
window.location.replace("http://"+$(this).val());
One option can be that you change the first option like
<select class="mySelect">
<option value="select">Select URL</option> <!--Default displayed--->
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
or you can use click jquery event for combo box .
<form>
<select class="mySelect">
<option value="" selected="selected">Please Select</option>
<option value="www.url1.com">Url 1</option>
<option value="www.url2.com">Url 2</option>
<option value="www.url3.com">Url 3</option>
</select>
</form>
$(".mySelect").change( function() {
var n = $(this).val();
if(n != "") {
window.location.assign("http://"+n);
}
});
I have a web form that I'm applying both client and server side validation to and on this one text input field I'm looking for some way to have conditional code that sets a character limit based on what a dropdown menu is set to.
For example:
If Option 3 is selected, limit maximum character limit to 10.
<select>
<option>Option 1</option>
<option> Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<label>Text Field</label>
<input type="text" />
I've been experimenting with a number of pre-coded javascript / jquery validation scripts and they all work fine except when it comes to this particular need.
How can this be done?
Thanks for any advice.
Create a select onchange event that will set the maxLength of the input. You can use the option value as the value for the event. Example:
<select id="sel" onchange="document.getElementById('txt').maxLength = document.getElementById('sel').value;" >
<option value="3">Option 1</option>
<option value="5"> Option 2</option>
<option value="10">Option 3</option>
<option value="20">Option 4</option>
</select>
<br/>
<label>Text Field</label>
<input type="text" id="txt" value="" maxlength="3" />
You can test it here - http://jsfiddle.net/codefuze/R7RtJ/