How to select default value from dropdown list and then return back to same value after selection any other element in the list?

Question

There is a drop down div in my code which is like this :

<div class="form-group alert_txt col-lg-6">
         <label class="form_lable">Field</label><br>                                    
     <select class="form-control" onchange="funct1('rteSample',this.value)" ng-model="field"  > 
            <option value="" selected >Choose field</option>
            <option ng-repeat="x in field" value="{{x.fieldSymbol}}" >{{x.fieldName}}</option>
       </select>
      </div>

Here the drop down has a blank always even though I've given default selection as Choose field.

Also I want to return to the Choose field once any element in the list is selected. Can we do that ?

Yes I've tried other solution as well with same problem and they really didn't work. this

The *ng-model* attribute indicates Angular.js, so maybe you should add a tag for that. — RobG, Mar 23 '18 at 07:40

score 0 · Answer 1 · answered Mar 23 '18 at 04:54

0

Here is my solution.

Whenever onchange="funct1('rteSample',this.value)"

In this function make this.value as empty string that will however set default value as selected.

answered Mar 23 '18 at 04:54

Shikha thakur

1,269
13
34

I actually want to send the value of the selected item from the dropdown to the function "func1" . so wont it send blank value once it set it empty ? – Shalini Raj Mar 23 '18 at 04:58
@ShaliniRaj—this seems like a kludgy way to do it. If you want the first option selected, then just `this.selectedIndex = 0` will do. If you want to do something with the selected value first, then do something with `this.value` before setting the selectedIndex to 0. – RobG Mar 23 '18 at 05:00
yes u can send the value to the function and store that value somewhere and then set this.value to empty strings – Shikha thakur Mar 23 '18 at 05:00
why does the "Choose field" doesn't comes as default selected value ? although I've given it as selected. there comes a blank then when I click on drop down , there comes the first field as Choose field – Shalini Raj Mar 23 '18 at 05:06

score 0 · Answer 2 · answered Mar 23 '18 at 05:05

You can set the first option as selected by setting the select's selectedIndex property to 0. Adding the selected attribute to an option should make it the default selected, but most browsers will set the first option as selected if none are selected explicitly.

You can get the value of the select before resetting the value, e.g.

function resetSelect(e) {
  console.log('The value was ' + this.value);
  this.selectedIndex = 0;
}

window.onload = function() {
  document.querySelector('select').addEventListener('change', resetSelect, false);
}

<select>
  <option selected>Choose field
  <option> first
  <option> second
  <option> third
</select>

Note that if users are navigating using the keyboard, the browser may fire a change event every time the user tries to arrow down over the options, so test for accessibility.

i've already given it as selected but it doesnt comes . Instead a blank element comes and Choose field comes in drop down — Shalini Raj, Mar 23 '18 at 05:13

How to select default value from dropdown list and then return back to same value after selection any other element in the list?

2 Answers2