Develop Reference

Determine the Selected Index number of a drop down menu?

I'm trying to make sure that the user is not selecting the default of a drop down method by determining the index number selected. It seems to be only returning false even though I believe the code is correct... So far I have the code listed below but its not working, any ideas?
<p id="Gender">
<label for="Gender">Gender: </label>
<select required>
<option disabled selected value="Select">Select</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</p>
function validate1() {
valCheck3 = true;
var dropD1 = document.getElementById("Gender");
var resultSelect = dropDown1(dropD1);
var image3 = getImage(Boolean(resultSelect), "gender");
var labelGender = getNotification3(Boolean(resultSelect), "gender");
document.getElementById("Gender").appendChild(image3);
document.getElementById("Gender").appendChild(labelGender);
}
function dropDown1(select){
if(select.selectedIndex > 0){
return true;
}
valCheck3 = false;
return false;
}
EDIT: I added the HTML I used the setting to make the answer required, the problem is I need to have a button that checks whether the answer has been selected to insert an image next to the box. So in this case I figured I could determine the selected index number of the drop down so that I could determin

You can add the required attribute to the select element, then add some value attribute to each option except for the first one (use value without the value itself i.e. value="1")
Then you can just use select.checkValidity(), which returns true or false.

I'm trying to make sure that the user is not selecting the default of a drop down
You can just add disabled attribute to the <option> and also make it default. If the user opens the dropdown, the default option can not be clicked anymore and the user has to choose an onther option.
Example:
<form action="">
<select required>
<option disabled selected value>Default option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<input type="submit">
</form>

How to click a dropdown menu and select option?

I have the following code
<select class="needsclick" id="country" name="order[country]">
<option value="USA" selected="selected">USA</option>
<option value="CANADA">CANADA</option>
</select>
I could do the following javascript command to change the option value
document.getElementById("country").value = 'CANADA'
however, this does not change the selected value and does not change the state box to province.
When I physically click this dropdown menu and change to CANADA, the effects of the change take place (the state box changes to province)
I am using Swift iOS to parse HTML and wondering what line of javascript code is needed to click a option value rather than changing the option value?
If I do the following after changing the value
document.getElementById("country").click()
it just clicks the menu but still does not change the state box to province (happens when physically clicking the option value)
How can I achieve this using a javascript command like the two above?
The state/province box is irrelevant to the code just relevant to the fact it changes when the dropdown is physically clicked and not when programmatically changed.
I can do the following code but it still does not change the state box to province (only if physically clicked)
document.getElementById("country")[1].selected = true

To work with the option elements within a select, you must access the options node list and then select one to work with.
Setting the value is separate from setting the selected flag.
var countries = document.getElementById("country");
var states = document.getElementById("provincesUSA");
var territories = document.getElementById("provincesCanada");
countries.addEventListener("change", function(e) { update(e); });
function update(e){
// show the correct sub-list based on the selected option
var country = countries[countries.selectedIndex];
if(country.value === "USA"){
states.classList.remove("hidden");
territories.classList.add("hidden");
} else if(country.value === "CANADA") {
territories.classList.remove("hidden");
states.classList.add("hidden");
} else {
territories.classList.add("hidden");
states.classList.add("hidden");
}
}
// To dynamically choose
document.querySelector("button").addEventListener("click", function(){
countries.options[2].selected = "selected"; // Canada
// Simulate the change event
update(countries);
});
#provincesUSA.hidden, #provincesCanada.hidden { display:none; }
<select class="needsclick" id="country" name="order[country]">
<option value="" selected="selected">Choose A Country</option>
<option value="USA">USA</option>
<option value="CANADA">CANADA</option>
</select>
<select id="provincesUSA" class="hidden" name="states">
<option value="al">Alabama</option>
<option value="ar">Arkansas</option>
</select>
<select id="provincesCanada" class="hidden" name="territories">
<option value="on">Ontario</option>
<option value="qu">Quebec</option>
</select>
<button>Force A Selection (click me whe CANADA is NOT selected)</button>

document.getElementById("country").selectedIndex = 2;

Having a input text appear when chosen option in a double drop down select option

Say I want to create a double drop down select options where the second drop down list changes according to which the first drop down option is selected. I've already figured out how to do this. BUT one of my first drop option is "Others" and I want an input textbox to appear if I select "others" in the first dropdown list instead of having a second drop down option list. So far, I've been able to get the input textbox to appear, but the second drop down option list also appears (as undefined). How do I make the second drop down option list disappear?? Also, if one of the options in the first dropdown list doesn't need or have a second drop down option list, how do I code this?
This is an example of my script (I only changed the names of the categories):
<form name="search" method="get">
<select name="cat" id="cat" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected disabled>Category</option>
<option value="fruit">Fruit</option>
<option value="music">Music</option>
<option value="vegetable">Vegetable</option>
<option value="book">Book</option>
<option value="other">Other</option>
</select>
<input type='text' id="other" class="hidden" />
<select name="cat2" size="1">
<option selected disabled>Sub-category</option>
</select>
<input type="button" name="Search" value="Search" onClick="go()" /
</form>
This is my javascript:
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
var groups=document.search.cat.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=0
group[1][0]=new Option("Moodle")
group[1][1]=new Option("Ultranet")
group[1][2]=new Option("Private School")
group[2][0]=new Option("Gmail")
group[2][1]=new Option("Windows Live")
group[2][2]=new Option("Office 365")
group[3][0]=0 //has no second dropdown option, how do I make it disappear?
group[4][0]=new Option("Kamar")
group[4][1]=new Option("Musac")
group[5][0]=new Option("Windows")
group[5][1]=new Option("Mac")
group[5][2]=new Option("Novell")
group[5][3]=new Option("Linux")
group[6][0]=new Option("Ruckus Wireless")
group[6][1]=new Option("Aerohive Networks")
group[6][2]=new Option("Aruba Networks")
group[7][0]=new Option("Pre-Trial")
group[7][1]=new Option("Implementation")
group[7][2]=new Option("Full Trial")
group[8][0]=0 //The 'others', I don't know what to put here to make this disappear
var temp=document.search.cat2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}

You need to add 2 new lines to the .change function, from:
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
}
});
Change it to
$('#cat').change(function(){
var selected_item = $(this).val()
if(selected_item == "other"){
$('#other').val("").removeClass('hidden');
$("select[name=cat2]").addClass('hidden');
}else{
$('#other').val(selected_item).addClass('hidden');
$("select[name=cat2]").removeClass('hidden');
}
});
So when you remove hidden class from the input you have to add it to the select with name "cat2", and vice-versa. Hope this helps you.

Open the html selected list with a button click

I have created a option list in a webpage where I want to open the select list with a button created with a <div> when a option selected from the list then the selected value comes on the div also.
So here I want the javascript attribute to open the list on button click something like this
document.getElementById('selectedlist').open.
any body have suggestion about this?

Take a look at http://code.google.com/p/expandselect/. I think this is what you want.
Then you can open the select like this.
ExpandSelect("myselect_id")

Here is the simple Javascript code to open(toggle) the select box on clicking the button.
<script type="text/javascript">
function expandSelect(id){
var select_flag = document.getElementById('select_flag').value;
if(select_flag==1){
var select_box = document.getElementById(id);
select_box.size = 1;
document.getElementById('select_flag').value = 0;
}else{
var select_box = document.getElementById(id);
select_box.size = select_box.options.length;
document.getElementById('select_flag').value = 1;
}
}
</script>
<button onclick="expandSelect('select_box')"> Toggle Select Box </button>
<div id="container">
<select name="select_box" id="select_box" >
<option value="">Select</option>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option4</option>
<option value="">option5</option>
<option value="">option6</option>
</select>
<input type="hidden" name="select_flag" id="select_flag" value="0">
</div>

HTML Reset form including select element with selected='selected'

I have a table page with html filters in a form at the top. When the form is submitted, the selected filters are applied to the SQL query, and the filters all gain selected='selected' on the value that was selected. I want a reset button that resets these to the first value of the selection, not that specified in the incoming code.
Does that make sense?
For example, if the HTML was :
<select name='minTV'>
<option value=0>Min TV 0</option>
<option value=1000>Min TV 1000</option>
<option value=1100>Min TV 1100</option>
<option value=1200>Min TV 1200</option>
<option value=1300 selected='selected'>Min TV 1300</option>
<option value=1400>Min TV 1400</option>
<option value=1500>Min TV 1500</option>
<option value=1600>Min TV 1600</option>
<option value=1700>Min TV 1700</option>
</select>
Now, when I hit the reset button, I want the first value, value=0, to be the selected one, not value=1300, as happens by default. I need to do this over several select boxes.
Any ideas? As simple as possible please.
No jQuery, but Prototype is fine.
EDIT, in response to answer #1:
I can't seem to get this one to work; my select is :
<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 >Premiership East</option>
</select>
My reset button is:
<button type="reset" value="Reset" onclick="return resetAll();">Reset</button>
And my javascript function is:
function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
}
Any ideas?

You can give an id to your select tag for example id="selectbox" Then you can change the selected value with the following Javascript code:
document.getElementById('selectbox').selectedIndex = 0;
Note that you have to enter the number of the option, so for example for value=1000 you would enter selectedIndex = 1;
function resetAll() {
document.getElementById('divSelect').selectedIndex = 0;
};
<select name='div' id='divSelect'>
<option value=0>All Divisions</option>
<option value=1 selected>Premiership East</option>
</select>
<button type="reset" value="Reset" onclick="return resetAll();">Reset</button>
see on JSFiddle.net

document.getElementById('divSelect').selectedIndex = -1;