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>

Manipulating select option selected value in DOM several times without page load

I am in an unfortunate position where I need to be able to copy entire blocks of HTML without the page reloading using javascript/jquery, including inputs and selects.
I have most of it working, but I'm stumped on the selects. In order for it to "copy" properly so the copy displays the selected value of where its copying from, I need to explicitly set the attribute "selected" on the copy from select. The problem is, if I change the value on a select that I will copy from, the previous selections "selected" attribute remains, and I don't know how to get rid of it.
Here is a link to the fiddle and below is the basic test to show you what I mean: fiddle. You'll need to inspect element on the select list and show all of the option tags.
Make a selection
Hit the Enter button
Observe the selected attribute go on the option you chose
Choose a different option
Hit the enter button
Observe that now two options have the selected attribute. At this point I need to get rid of the selected attribute from the step 3 observation
HTML:
<table>
<tr>
<td>
<select>
<option value="">Select One</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
</select>
</td>
</tr>
</table>
<button onclick="enterTest()">Enter</button>
Javascript
function enterTest(){
var $selectedOption = $("select").children(":selected");
$selectedOption.attr("selected","selected");
}

No need to deal with options and selected attribute.
If the values are unique,
var $select = $("select");
function enterTest(){
$select.clone().val($select.val()).appendTo('body');
}
Demo
Otherwise, use selectedIndex:
$select.clone().prop('selectedIndex', $select.prop('selectedIndex'))
Demo

Getting the last option of a drop down list

I seem to be unable to select an element of a drop down list and having the page to recognize the change. And as the option values are generated, I cannot click them directly, but have to make the selection by some kind of index/number.
So when I use this code to select the second option:
casper.evaluate(function()
{
document.querySelector('select[id="sub-product-select"]').selectedIndex = 2;
return true;
});
The second option is set - but the page does not recognize the change and does not change some depending values like price or activating the "buy" button of the same form.
The drop down selection looks like this:
<form id="form-product-add-to-cart" action="/cart/add">
<select id="sub-product-select">
<option value=""></option>
<option value="02T01S1-01"></option>
<option value="02T01S1-02"></option>
<option value="02T01S1-03"></option>
So question is:
How to not only select the the second entry, but make the page recognize it like it were clicked or got a "return" after selection?

Well, for me this code works :
this.mouse.down("select#sub-product-select");//press left button
this.mouse.up('select#sub-product-select > option:nth-of-type(2)');//release left button
Is your selector unique? How do you check the changes? Try slimerJS to see them in live (the press/release click).

Remove previous drop down selection from future drop down options

I have a modal that presents you with an option to insert a row. The row has a drop down menu with around 10 values to choose from. When I click the insert button to insert another row I need the new drop down that is generated to NOT have the previous row's selected value in the options. Basically it's like a bunch of cascading drop downs. The new drop down will not have the previous drop down's selected option.
Basically my question is how could/should I go about implementing this with JavaScript/JQuery?

It would be good to see your code to give a good answer, but you can remove an option like this...
$("#yourdropdownlistid option[value='thevalueofthetargetoption']").remove();
You might try changeing the option value of the selected item to 'remove' on change, then you can target all of the 'remove' option values.
$("#yourdropdownlistid option[value='thevalueofthetargetoption']").each(function() {
$(this).remove();
});
you can see it running here...
http://jsfiddle.net/pUeue/1420/

Assuming you have the following HTML:
<div id='container'>
<button>add</button>
<div class='row'>
<select>
<option>hi</option>
<option>hello</option>
<option>how</option>
<option>are</option>
<option>you</option>
</select>
</div>
</div>
You can do it as follows:
$('button').click(function () {
var clone= $('.row').last().clone();
clone.find('option:selected').remove();
if($(clone).find('option').length>0)
$('#container').append(clone);
});
check this JSFiddle

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