We Keep Coding

ng-selected first that is not hidden

I have a select list:
<option ng-repeat="hour in Hours"
value="{{hour.Value}}"
ng-show="filterEvent($index)"
ng-selected="hour.Value == EventDate || $first">
{{hour.Text}}
</option>
And I want the first element that is not hidden to be automatically selected. Right now if I hide the first elements it wont change the selected index.
How can I do this?

just hide the first option
<select ng-model="hour" required="required"
ng-options="hour.value as hour for hour in hours" >
<option style="display:none" value="">select a type</option>
</select>

Angular tends to ignore the selected atributte, if you want an element to be selected simply give your select a ng-model and set the value you want selected to your model variable.
<select ng-model="selectValue" name="mySelect">
<option ng-repeat="hour in Hours"
value="{{hour.Value}}"
ng-show="filterEvent($index)"
>
{{hour.Text}}
</option>
</select>
And, in your controller use a forEach to find the first visible value of your array and asign it's value to your model variable.

Change a Select Option value with no id/class

There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.

You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>

You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').

DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...

If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));

How to hide and show select options

I'm very very new to jQuery. I Googled a lot before I'm asking, though it looks silly but for me its complicated.
I have a simple <select> list which has around 4 values like this image shown below.
Now at runtime, I want to hide the options and show based on index or value names in jQuery. How can I achieve this?.
My drop down box has a div region and simple select option with set of values. Please provide me a simple example.
Sample code
<Div ID = "abcd">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
In this how to hide Volvo/Opel at run time?... like i want to show and hide these options dynamically.
Like Ex: When a button is pressed i want to hide Volvo. Similarly if another button is pressed i want to display Volvo back.

if you would like to hide the whole select you should give your select or the div containing your select an id and then you can do like :
<div id="mySelect" >your select tag here </div>
$('mySelect').show(); // or $('mySelect').hide();
http://api.jquery.com/hide/
http://api.jquery.com/show/
if you would like to hide the option you can do like below :
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
To be more specific to your code :
<div id="abcd">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
title = 'volvo';
$("#mySelect option[value=" + title + "]").hide();
like in this post :
Hide options in a select list using jQuery
or remove it :
JQuery: Hide options of select according to option value

What's the easiest way to implement this multi-level drop-down list?

I want to implement the following system of drop down lists:
I'm aware that drop down lists are implemented using <select> statements. However, I'm not sure if I need to use Javascript commands to handle my requirements listed in the picture. How would you suggest to handle this?
Thanks in advance!

You will have all three drop down on the page but dropdown 2 and 3 will be hidden. On change of first drop down you will have to check the value of first drop down and show second and third dropdown. Demo is available here
In html we define three dropdowns first is visible and second and third are hidden. We will show the hidden dropdown when 3 is selected from first dropdown
<select id="sel1" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
<select id="sel2" style="display:none" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
<select id="sel3" style="display:none" >
<option > 1 </option>
<option > 2 </option>
<option > 3 </option>
</select>
​In javascript we have show the hidden dropdowns when 3 is selected from first drop down
$('#sel1').change(function ()
{
if($(this).val() == "3")
{
$('#sel2').show();
$('#sel3').show();
}
}
);
​

I think if you want to only allow the user to select second and third options based on the selection event in the first option, you are probably going to need JavaScript to do this. If you have to cater for users with JavaScript disabled you will have to have something like an Update button that posts to the server where server-side code in ASP.Net / PHP / Django / Node.js or something of that sort, builds the second and third options and returns them to the user.

You can put the second and third dropdowns inside divs and keep them hidden initially. Once the value of first is selected, make the second visible and so on. You can easily do this with javascript. For eg:
function onLoad() {
document.getElementById("dayDropDownDiv").style.visibility="hidden";
}
and create the select inside the div in the body as:
<div id="dayDropDownDiv">
<label for="select-Day" class="select">Day:</label>
<select name="select-day" id="dayDropDown" onchange="dayChange(this)"></select>
</div>
You can also create the dropdowns programmatically in javascript. You'll have to add the <option>s to the <select>'s innerHTML as:
function addValues() {
var dayOptionsList = "";
for(loopIndex=1;loopIndex<=31;loopIndex++){
dayOptionsList = dayOptionsList+"<option>"+loopIndex+"</option>";//<-this will create an options list for days
var daySelector = document.getElementById("dayDropDown");
daySelector.innerHTML = dayOptionsList;//done
}
Finally, make them visible when the first <select>'s particular option is selected:
function firstValueSelected( resultsObj){
var val = obj.options[obj.selectedIndex].text;//<- text of selected option
if(val=="f")
document.getElementById("dayDropDownDiv").style.visibility="visible";
}

jQuery val() on HTML Select Text takes precedence over Value

Take the below HTML select for an example:
<select name="selValues" id="selValues">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>
If we write the following jQuery statement:
$('#selValues').val('2'); // Two will get selected
$('#selValues').val('3'); // 3 will get selected instead of 5??
Why is it like that?

Use
$("#selValues option[value='3']").attr('selected', 'selected');
Also a good article on
jQuery - Select elements - tips and tricks

The val() method gets or sets the selected text. You may want to use selectedIndex instead:
$('#selValues').get(0).selectedIndex=2;

When selecting options jQuery looks first at the value then at the text of an option. It also goes through options in order. So, $('#selValues').val('3') selects options 3 first, but right after that changes selection to option 4 (as it has the text "3"). Use a multiple select to see that in fact both options are selected
<select name="selValues" id="selValues" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">5</option>
<option value="4">3</option>
</select>

As of JQuery 1.4 this has now been made unambiguous. It will now select by value, not by text value http://jquery14.com/day-01#backwards
If you do need to still select by value then a suggested method is here