We Keep Coding

Drop down to have default selected the first element of the list in html

I have a dynamic list to display on dropdown. But always the first element of the list should be selected by default on gui and later on user can select any other.
When I am trying to display the first element of the list in my drop down, that element repeated in the list and if user select any other element then that element is being repeated. Below is my code.
html code:
<select class="form-control" name="settingTabs" id="settingTabs" ng-model="mData.selectedTabName" ng-change="selectTab()" ng-init="mData.selectedTabName = mData.tabList[0].settingTabName" ng-options="settingTabs.settingTabName for settingTabs in mData.tabList">
<option value="">{{mData.selectedTab}}</option>
</select>
js code:
$scope.selectTab = function(){
var x = $scope.mData.tabList.indexOf($scope.mData.selectedTabName);
$scope.mData.selectedTab = $scope.mData.tabList[x].settingTabName;
}
Need help here so I can have only the list to display in dropdown and by default first element should be selected displayed from that list.

I myself got an answer so thought of posting this too. Since angular provide default option for drop down, so make that ng-if="false" will work here.
<option value="" ng-if="false">{{mData.selectedTab}}</option>

Marking a select control option as selected preventing the default value to be shown jQuery

I have a simple HTML select with options. What I do is - set an option of that control as selected just after the page is loaded. My question is - how can I do that so the users won't see the first option of the select and will see the select with the value from the DB set. Here's the example:
<select id="simpleSelect">
<option value = "1">One</option>
<option value = "2">Two</option>
<option value = "3">Three</option>
</select>
Setting the value as follows:
$("#simpleSElect").val(2);
Now the users will see the select with selected option "One" and it will flash changing the option to "Two" once the jQuery code is executed. This flashing does not look good and I'm curious if there's a way to prevent this flashing and show the users the select with directly "Two" selected.
Thanks.

How to reselect already selected option

The title seems confusing but what I want to do is...
I know how to handle only if the user select new option with this - $('select').change(function(){}).`
But not if the user wants to select the already selected option.
I've also tried with radio but same thing.
Okay for example I have a select with an option (red,blue,green).
<select>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="green">GREEN</option>
</select>
and I have this script:
$('select').change(function(){
var val = $(this).val();
alert(val);
});
When I select option 'blue' it alerts a value 'blue', then I select 'green' it alerts 'green' as well. but when I select 'green' again nothing happens.

This question comes to my attention as this is pretty basic stuff but no one actually dig into it further. OP has been using change(), but when you reselect the current selected option nothing is fired!
I tried click(), but it's firing before you can even choose an option.
With blur(), after you're done selecting nothing is fired because the the select element is still being focused, so you need to focus out like clicking outside for it to execute.
So I just suggested OP to switch to a radio type input then handle execution with click() event. That way you can still reselect already marked radio button.
But then I noticed that you just need to get the second click on <select> element because the first click opens the drop down list of options the second click returns the value of your selected option. So I came up with this:
$('select').click(function(){
var $this = $(this);
if ($this.hasClass('open')) {
alert($this.val());
$this.removeClass('open');
}else {
$this.addClass('open');
}
});
But now the problem is when you first click on <select> the drop down is being showned and we've also added the class 'open'. Then clicking elsewhere (without selecting an option) the drop down is hidden so when you click back on <select> the event is fired before you can even select an option.
So I added this code to fix that:
$(document).click(function(e){
var $select = $('select');
if (!$select.is(e.target)){
$select.removeClass('open'); //reset the steps by removing open
}
});
You can test it out in this jsfiddle. Cheers!
I think when <select> loses its focus is also a concern. So I added blur() event. See this update jsfiddle

i solved using onclick='this.value=-1' that reset the selection to nothing...

I have solved this problem by using:
$('#id_selec').on('click', 'option', function (e) {
value = $(this).val();
// ....
The handler works if you select any (including the already selected) option.

In instances where nothing should happen when the user selects the already-selected option I suppose it is a "feature" of the DOM rather than a bug to have no Event occur. However, if your code is doing more with <select> than making a simple selection it is also a nuisance, so I'm grateful others have tackled it here.
The current accepted answer is clever in the use of the click event to capture selection of an already selected <select> option, but if you are willing to specify the length of your list as (in this case) <select size=3>, you can simply set the selected value to "" from your "change" Event, and the same selection will trigger every time.
In this case the OP's example would change to:
HTML:
<select size=3>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="green">GREEN</option>
</select>
jQuery:
$('select').change(function(){
var val = $(this).val();
alert(val);
$('select').val("");
});
The only side-effect is that the selection element may now display to the user as three rows rather than one.
(Credit goes to Kirby L. Wallace for the idea of setting the select's value to "").

Add and select a "fake" <option> value to a <select>

I need to add a "fake" <option> to a <select>, that will be shown as the selected one, but that can't be selected in the dropdownmenu if the user want to change item.
For example: I have a page that displays 10 fruits. Each fruit has his weight. Using the select, I can filter the fruits by weight:
<select id="fruits">
<option>1 kg</option>
<option>2 kg</option>
<option>3 kg</option>
</select>
if I select the 2nd option (2kg), the page will remove every fruit that has weight != 2kg, and obviously show only those with weight == 2kg.
Now I need to add a "weight range", for example "show fruits whose weight is between 1 and 2 kg". I don't want to add a new option to the , I just want to filter the table showing fruits with weight between the selected range (1 and 2kg), and show this range as the selected value in the select. So my CLOSED dropdown menu will have value = "1-2kg", but if I click on the select, I will not find "1-2kg" option (that's why I wrote "fake" option in the title).
In a nutshell I just want to edit the selected-shown select text, not his options... Something like, using JS
var select = document.getElementById("fruit-select");
select.value = "1-2kg";
obviously this is not working because the option "1-2kg" does not exists..
Is this possible? I hope I was clear enough.. Thanks in advance for any helps, best regards
Solution (not working on Safari...)
Thanks to Ricardo I came to this solution: http://jsfiddle.net/4suwY/5/
HTML:
<select id="asd">
<option>hello</option>
<option>I'M THE CHOSEN ONE</option>
<option>asd</option>
<option>wer</option>
<option>qwe</option>
</select>
JS:
var sel = document.getElementById("asd");
var optnz = sel.getElementsByTagName("option")[1];
sel.value = optnz.value;
optnz.style.display = "none";
the "I'M THE CHOSEN ONE" option is displayed as selected, but is not clickable (not even visible in the options list)
Thanks guys!

I think what you need to do here, is actually have a visible select with all those values, 1kg, 2kg, etc and then you have a hidden select, that will contains those ranges, like 1-2kg, etc (if the ranges are fixed). Everytime you select something from the visible dropdown you change the selected item of the hidden dropdown to the desired range.

It sounds like you want to include a range of weights. You may want to consider a different type of input, such as a range slider. Here's an example from the jQuery UI project. I'm not suggesting you use jQuery UI per se, just showing you one way it can be implemented.

You could use <select multiple> and whenever someone selects more than one option you get the maximum and minimum and show that interval.

try this:
http://jsfiddle.net/4suwY/4/
the only problem I see is losing the value on select click on this function:
$("#asd").mousedown(function () {
$("#asd option[value='1-2kg']").remove().change();
});

Selecting options from a drop down

I'm building a recipe-finder for a new food blog. The design I have basically involves the user selecting ingredients, one at a time, from a drop down <select>, the option disappearing from the list (so they can't select it again) and appearing on another HTML list with a link to remove it from the list. Once they're done, they click a button and that takes them through to a results page.
Here's the select markup as generated by the PHP:
<select>
<option value="">Please select</option>
<option value="beef-mince">Beef mince</option>
<option value="carrots">Carrots</option>
...
</select>
It's not drastically complex but it does raise a few questions on how I'm going to do some of these things. I'm using jquery.
I need to store the selected items in memory so I know what to send to the search page when they've done selecting items. What's the best way of doing that in your opinion as each item has two values (its "real" value and its database-value)?
How do I make "Please select" the selected option after they've selected something (preferable without triggering the onchange event)?
Once I've stored it in memory and added it to the displayed list of things they're searching for, how do I delete that item from the available items? Can I just "hide" or disable it (safely)?
If in #3 I have to delete it from the DOM, when I add it again, can I sort the list (based on either value) and keep the please-select option at the top?

1.) You can append hidden form elements to the page whose value is the value of the selected option.
2.)
jQuery("#select-list")[0].options[0].selected = true // assuming it's the first item
3.) I would remove the element from the DOM using jQuery("#select-list option:selected").remove()
4.) You can use before(). jQuery(your_default_option).before("#select-list option:first");

You can store the 'two values' in a hidden form field as an object in JSON notation. This will make it easy to modify in jQuery as the user interacts with the page.
You will need to use a combination of the onchange, keyup and keydown event to capture possible changes to the form so that you can re-select the 'Please Select' option.
You will need to remove the option from the dom and re-add it later. You can easily do this through jquery through something like this:
$("select option:selected").remove();
You can write a sorting function for the options starting with index 1, and keep the 'Please Select' as the first option.

1)
Basic idea, you need to check to make sure the first is not picked
var selections = [];
var mySel = document.getElementById("mySelectId");
var ind = mySel.selectedIndex;
selections.push( mySel.options[ind].value ); //add to a list for you to remember
mySel.options[ind] = null; //remove
2)
mySel.selectedIndex = 0;
3)
See #1
4) Yes you can add it anywhere you want by using insertBefore
Example here: http://www.pascarello.com/lessons/forms/moveSelectOptions.html

Will leave this answer here but I think I failed to read your whole post, so it might not help much.
You need to give your select a id like this:
<select id="MySelect">
<option value="">Please select</option>
<option value="beef-mince">Beef mince</option>
<option value="carrots">Carrots</option>
...
</select>
And to get it is just something like this:
<?php
$value = $_REQUEST["MySelect"];
echo $value;
?>
Code is not tested and $_REQUEST can be replaced by $_GET or $_POST regarding what you have specified as action on your form. $_REQUEST will eat it all though.