How to get the position of a selected option in a dropdown - javascript

How do I use jquery to find the position of the currently selected option, it also needs to update in real time if the user selects a different option.
<select id="visa_type_c" title="" name="visa_type_c">
<option selected="selected" value="No Visa" label="No Visa">No Visa</option>
<option value="EU Visa" label="EU Visa">EU Visa</option>
<option value="Easy Visa" label="Easy Visa">Easy Visa</option>
<option value="Hard Visa" label="Hard Visa">Hard Visa</option>
</select>
I seen the other threads but they are slightly different and I cant seem to make it work right for me.

Can just use pure JS:
document.getElementById("visa_type_c").onchange = function() {
alert(this.selectedIndex);
}
Pure JS Demo: http://jsfiddle.net/Xxqnr/1/

$("select").on("change", function(ev) {
console.log(ev.target.selectedIndex);
});

<a href='javascript:alert($("#visa_type_c option:selected").index())';>click for index</a>
Lots of ways to do it; if you add this to your page it will show you the selected index.

Related

Clear multiple select jquery-select2

I am trying to create a reset button for jquery-select2 multiple select. I have no idea why my solution doesn't work.
Html:
<select id="workload-selector" class="js-source-states-2" multiple="multiple" style="width: 100%">
<option value="haha">haha</option>
<option value="haha2">haha2</option>
<option value="haha3">haha3</option>
</select>
<button id="reset">
Reset
</button>
Javascript:
$("#workload-selector").select2();
$("#reset").click(function(){
$("#workload-selector option:selected").removeAttr("selected");
});
I made it on jsFiddle:
https://jsfiddle.net/DTcHh/41975/
The select2 multiple saves value in an array
All you need to do is
$("#workload-selector").val([]).change();
You can just do:
$("#workload-selector").select2('val', '');
Also according to the docs this also works:
$("#workload-selector").val("");
$("#workload-selector").trigger("change");
I have done just that, there it goes a sample of my elaboration
$("#reset").click(function(){
$("#workload-selector").val(null).trigger('change');
});
In the documentation https://select2.org/programmatic-control/add-select-clear-items#clearing-selections saying that I need set null value. When select have multiple choices, it gave me a blank selected option. But if set not exist value, it clear normally for me.
For example:
if in options u have:
<select id="mySelect2" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
This normally clear select.
$('#mySelect2').val(-100).trigger('change');
This works for but single and multi and is according to docs https://select2.org/programmatic-control/add-select-clear-items#clearing-selections
$('#mySelect2').val(null).trigger('change');

How to get all select elements having their with multiple selection criteria, jquery?

How to get all dropdowns having on the basis of multiple attributes name and value.
$('input[name="ABC"][value="-1"]') this expression seems to work, but for drop downs this doesn't seems working.
<select name="department" />
<option value="-1" selected="selected">Select One</option>
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
</select>
alert($("select[name=department][value=-1]").length);
gives 0 in alert box.
refer to this fiddle.
http://jsfiddle.net/8QBH7/
alert($("select[name=department] option[value=-1]").length);
I believe this is the query you're looking for:
$("select[name='department'] option[value=-1]")
See fiddle demo
Edit based on your feedback I think you want to use the selected pseudo class. Fiddle
alert($("select[name=department] :selected").val());
$("select").on("change",function(){
alert($("select[name=department] :selected").val());
});

Creating a select drop-down list that expands when a user hover over an option

I am trying to create a select element which has a basic list, then when the user hovers over an option it expands to shows a more complete list.
I started by using css to hide all the values I wanted hidden, but this did not adjust the height of the select dropdown, so I was left with a lot of white space.
I then tried to have two selects, one with the reduced list, the other with the complete list(which is hidden). I then used javascript to copy the options from the complete list to the reduced list, when a user hover on the 'Other' optgroup. The code for this is shown below.
Html:
<select id="Title">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<optgroup label="Other">Other</optgroup>
</select>
<select id="FullTitle" style="display:none">
<option value="">Select...</option>
<option value="MR">Mr</option>
<option value="MISS">Miss</option>
<option value="MRS">Mrs</option>
<option value="MS">Ms</option>
<option value="DR">Doctor</option>
</select>
Javascript:
<script type="text/javascript">
$('select').find('optgroup').hover(
function () {
var parent = $(this).parent()
var selected = parent.find('option:selected').val()
var id = "#Full" + parent.attr('id')
parent.html($(id).html())
parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
})
</script>
This works fine in firefox but does not work in either IE or Chrome. I am not sure why.
I was wondering if anyone knows why this is not working or a better approach to my problem?
Hover events don't fire for options in IE and Chrome. There are some scripts you can try that might do this, and I've seen other posts on this site about it as well:
jquery hover event doesn't work with select option tag in google chrome?
From what I've seen, converting this into a div/ul and using css/jquery to make it look like a select list might by your best bet.

Change text inside dynamic div when on select change is made jquery

I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>
Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});
Try this
​$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});​
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/

Modification to jQuery script to let me choose which is the default value of the select list on page entrance

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>

Categories

Resources