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>

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();
});

Trouble showing one element and hiding others based on SELECT option

I am using jQuery and what I am trying to do is have an onChange event fire whenever a dropdown SELECT option is chosen that will display an element based on the value of the option selected. The difficult part is that I also want any element displayed to disappear when a new option is chosen so that the chosen element is the only one showing. I am very close but can't understand why what I am trying is not working.
So far what I have is this:
//Dropdown
<select id="menu">
<option val="show1">Show First</option>
<option val="show2">Show Second</option>
...
<option val="show255">Show 255th</option>
</select>
//Invisible areas
<myArea id="show1" style="display:none">
Stuff1
</myArea>
<myArea id="show2" style="display:none">
Stuff2
</myArea>
...
<myArea id="show255" style="display:none">
Stuff255
</myArea>
//JavaScript
<script>
$('#menu').change(function () {
optName = $('#menu').val();
$("myArea").not("#" + optName).hide();
$("myArea").("#" + optName).show();
});
</script>
So far, what WORKS is that if I don't add the style="display:none" to the <myArea> elements, I can get every element except the chosen one to hide. However, when I change the option again, the already displayed element disappears but the chosen element does not show. If I use style="display:none" on the myArea elements it will not display anything when any option is selected.

$('#menu').change(function () {
optName = $('#menu').val();
$("myArea#" + optName).show().siblings().hide();
});

$("myArea").("#" + optName).show();
does nothing.
$('[id='+optName+']').show();
May however work for you.

Selection panel - javascript radio button groups

I'm looking for a way to modify a page like this>
http://speckyboy.com/demo/digg-style-radio-buttons/index.html
so users can highlight one selection per row, IOW 8 radio button groups using a comparable visual style, not the traditional looking radio button controls.
I've tried nearly all the suggestions in stackoverflow I could find for handling radio button groups the last few days, but I clearly don't know enough js to adapt those suggestions properly. Can anyone help?

Can't you use the same id for all the radio buttons so that they work as a single entity? Then you can place them wherever you like.

You should use class(not ID, id must be unique on the page).
1 You can get all radio buttons
$('.class')
2 Now you can use each More details here http://api.jquery.com/each/
$('.class').each(function(index) {
// Add to element
});
3 To add you can with
http://api.jquery.com/add/
http://api.jquery.com/appendTo/
http://api.jquery.com/append/
http://api.jquery.com/html/

Just use a class for your elements - not sure if you were using radio buttons in the background or not like the example you posted
Minimized html
<div id='group1' class='radio'>
Group 1
<input type='radio' name='test'/>
</div>
<div class='row'>
<a href='#' class='c'>group 1a</a>
</div>​
jQuery
$('.row a').click(function(e){
e.preventDefault();
var $this = $(this);
$this.addClass('sel') // add class to currently clicked anchor
.siblings() // get siblings
.removeClass('sel'); // remove class from siblings
$('.radio').eq($('.row').index($this.parent())) // <-- get row of radios equal to this row
.find('input[type=radio]') // find the inputs radios under this
.eq($this.index()) // get radio with same index as clicked anchor
.click(); // trigger click
});​
http://jsfiddle.net/Lupw9/

Add or remove dropdown elements from the javascript or jquery

I have dropdownlist whose value is filled using the value of the other drop down. The problem here is that i need to bind the value of the second when the value of the first changes. I need to do it from the javascript.
Only thing i need to do is remove and add the select options in the second dropdown as the first dropdown changes.
How can i do this?
Thanks in advance.

Not too sure exactly what you want with the limited information provided but here is a solution that I think you are looking for:
HTML:
<select id="primary">
<option value="one">One</option>
<option value="two">Two</option>
</select>
<select id="secondary"></select>
jQuery:
var opts = {
'one':['a','b','c'],
'two':['d','e','f']
};
$('#primary').change(function(){
var select = [];
$.each(opts[this.value], function(k, v){
select.push('<option>'+ v +'</option>');
});
$('#secondary').html(select.join(''));
});
Demo: http://jsfiddle.net/28TQZ/

$("#dropdownlist1").change(function () {
var selected = $("#dropdownlist1 option:selected");
//clear
$("#dropdownlist2").html("");
$("#dropdownlist2").append($("<option/>").text(selected.text()).val(selected.val()));
})

Create all the drop downs you need, but only add options to the first one. The next ones only have a "default" value.
On selecting the first drop down, you use jQuery to get the values for the second drop down, based on the value selected in the first drop down:
$.post('ajax/aj_populate2nddropdown.php', $("#firstdropdown").val(), function(result) {
$('div.placedaround2nddropdown').html(result);
});
The file ajax/aj_populate2nddropdown.php collects the values of the second drop down, and returns them, inserted as options into the dropdown.

One simple way to do it is to just have a main dropdown and a bunch of secondary dropdowns that start hidden. when you choose something from the first, then you unhide the related second one

Try this If you are trying at client side
Replace your controls with asp.net server controls