Am a bit new to javascript. This question might sound a bit too silly, but I'm not able to figure it out why the following doesn't work in IE and works in firefox..
<select multiple="multiple">
<option value="tx" onClick="alert('tx');">Texas</option>
<option value="ak" onClick="alert('ak');">Alaska</option>
<option value="ca" onClick="alert('ca');">California</option>
<option value="ws" onClick="alert('ws');">Washington</option>
<option value="tn" onClick="alert('tn');">Tennessee</option>
</select>
The alert doesn't come up in IE (I'm using IE8). But it works in firefox!!!!!
According to w3schools, the option tag does support an onclick attribute. I tried with with bottom of the barrel IE6 and this doesn't seem to be the case.
The simplest way to do this would be:
<select multiple="multiple" onchange="alert(this.value);">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>
This is not exactly what you are after, but should be pretty close.
EDITS
It would just take more work:
<select multiple="multiple" onchange="
switch (this.value){
case 'tx': funcOne(); break;
case 'ak': funcTwo(); break;
etc...
}
">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>
At this point it would be appropriate to wrap the onchange into a function in a js file instead of embedding it in the html.
I would use the onchange event:
<select multiple="multiple" onchange="alert(this.options[this.selectedIndex].value)">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>
Although Daniel Mendel's solution is perfectly valid.
This is because IE doesn't register a click event when you select a new option in a select field (guessing). Instead, you should use the onBlur event (and put the code into your javascript instead) like so (assuming jQuery):
<script type='text/javascript'>
$(document).ready(function(){
$('select#state').bind('blur', function(){
alert(this.val());
});
});
</script>
<select id='state' multiple="multiple">
<option value="tx">Texas</option>
<option value="ak">Alaska</option>
<option value="ca">California</option>
<option value="ws">Washington</option>
<option value="tn">Tennessee</option>
</select>
Related
I have one question need your help about how to control srollbar in select2-4.0.2 version for too long data .
My requirement is : when option tags exceed 5 option , i need display vertical scrollbar for dropdown windows similar to size attribute under select tag ( ) , For this requirement how set option in select2 ?
for example :
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
</select>
<script>
$('.select2').css('width','200px').select2({allowClear:true})
</script>
BR
Kai
My select2 is not working. It just shows up with multiple selectbox
<form action="">
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
</form>
<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>
Error in console:
Uncaught TypeError: $(...).select2 is not a function
at HTMLDocument.
JS FIDDLE:
https://jsfiddle.net/y6ogss94/
This runs fine if you have imported correctly - jQuery library, select2 js and select2 css.
Here I have imported jquery 2.0.0 and select2 css and js from their cdn and it works fine:
$(".js-example-basic-multiple").select2();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<form action="">
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
</form>
Note:
You need to execute your select2 initialisation code only after you have included both the js libraries and DOM has loaded, which is a general practice for most jQuery plugins, not only this. So, while using this code you should write this script after including jquery and select2 scripts:
<script>
$(document).ready(function(){
$(".js-example-basic-multiple").select2();
});//document ready
</script>
<select id=workTypeSelection>
<option id="-1">-Select a Work Type-</option>
<option id="1">Common</option>
<option id="3">Computer Maintenance</option>
<option id="5">Facility Maintenance</option>
<option id="19">Furniture Move</option>
<option id="85">Global Work Type</option>
<option id="24">Lease Request</option>
<option id="21">Move Responsibility</option>
<option id="20">Purchase Request</option>
<option id="16">SLA Maintenance</option>
<option id="60">Test 123</option>
<option id="72">TEST J</option>
<option id="73">test jj</option>
<option id="65">TEST JOS</option>
</select>
How to Select "Test 123" as Currently selected option in The Dropdown list using jquery on page Ready using option id-> 60.
Try any from below,
$('select option[id="<your_value>"]').attr("selected",true)
$('#selectTagId option[id="<your_value>"]').attr("selected",true)
$('.selectTagClass option[id="<your_value>"]').attr("selected",true)
Hello Guys i want to change state based upon the country and the city according to state.
<label>Country:</label><br/>
<select onchange="getval(this)">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select name="" id="">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
<select name="" id="">
<option value="">Select city</option>
<option value="orissa">Nal</option>
<option value="orissa">Mir</option>
<option value="Telangan">Hyd</option>
<option value="Telangan">Vija</option>
<option value="america">KRK</option>
<option value="america">MRK</option>
</select>
How to change state based on country. and afterthat change city based on state.
Thanks in advance.
Just i want look like this below link.
http://demos.thesoftwareguy.in/multiple-dropdown-jquery-ajax-php/
What you need is easy to make, you only have to play with Ajax and onChange event in yours dropdowns:
<select id="idCountries" onchange="updateStatesByCountry()">
<option value="">Select Country</option>
<option value="india">India</option>
<option value="america">America</option>
</select>
<select id="idStates" onchange="updateCitiesByState()">
<option value="">Select State</option>
<option value="india">Orissa</option>
<option value="india">Telangan</option>
<option value="america">USA</option>
<option value="america">California</option>
</select>
...
In your JS code add the needed functions:
function updateStatesByCountry(){
console.log($('#idCountries').val());
//Here add Ajax logic to load a new dropdown with all states of the current country
//Your AJAX call should be something like this
$.get('/getStatesByCountry?country='+ $('#idCountries option:selected').val(), function(data){
$('#idStates').empty();
$('#idStates').append(data);
});
});
}
//Same logic for the next dropdowns.
And I highly recommend you read about AJAX before you write this code.
<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.roomForm.roomMenu.options[this.roomForm.roomMenu.selectedIndex].value">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>
Could someone point out why this piece of code is not working? It should redirect to another page when the drop down menu is changed.
Your code has extra ")" and this itself is select box. jsfiddle
<form name="roomForm">
<select name="roomMenu"
onChange="window.location = this.options[this.selectedIndex].value;">
<option value="">Choose ICU</option>
<option value="All">All</option>
<option value="/base/ICU5/example">ICU5</option>
<option value="/base/ICU6/example">ICU6</option>
<option value="/base/ICU7/example">ICU7</option>
</select>
</form>