10

I would like to load a select box where in the user's selected value will automatically appear.

I am receiving a Json data from the server with the user info. sample of data is: {"color":"red"}

In my html code I have select option like this:

<select id="input_user" class="selectinput" disabled="true">
<option value="n/a"> n/a </option>
<option value="red"> red </option> 
<option value="green"> green </option>
<option value="yellow"> yellow </option>
<option value="blue"> blue </option>
<option value="white"> white </option>
</select> //this will only show "n/a" as default

I tried this code to make the red value as default but not working.

var user_color= data[2].color; // this was from the json data
document.getElementById('input_user').selectedIndex = user_color;

Any help?

c.k
  • 1,075
  • 1
  • 18
  • 35

2 Answers2

12

As you've tagged this question with jQuery you can just set the val() on the select directly:

var user_color = 'red'; //data[2].color;
$('#input_user').val(user_color);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="input_user" class="selectinput" disabled="true">
  <option value="n/a">n/a</option>
  <option value="red">red</option>
  <option value="green">green</option>
  <option value="yellow">yellow</option>
  <option value="blue">blue</option>
  <option value="white">white</option>
</select>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
  • 1
    I think Rory's answer is correct. you are setting your select index, instead of updating value. – Faraz Sh. Jul 21 '16 at 07:39
  • now he can downvote as much as he likes :D. This answer is correct and I can't imagine this is the first time it was asked and answered correctly. – TehSphinX Jul 21 '16 at 07:41
  • what is the different with this? document.getElementById('input_user').value = user_color ; – c.k Jul 21 '16 at 07:41
  • 1
    @c.k: the difference is, that the answer uses jQuery and your suggestion is pure JavaScript. If you want a pure JavaScript answer, check here: http://stackoverflow.com/questions/10911526/how-to-change-html-selected-option-using-javascript – TehSphinX Jul 21 '16 at 07:45
  • Thanks for the help @RoryMcCrossan! – c.k Jul 21 '16 at 07:53
  • Glad to help. Also note that I gave a jQuery answer as you tagged the question with jQuery only. – Rory McCrossan Jul 21 '16 at 07:59
3

after much research, I finally went back to see the jQuery documentation that gave me the right answer :

1 / Delete all the attributes of tags that are already with the 'selected' attribute

function remove_selected(){
  $("select option").removeAttr('selected');
}

2 / I use the prop() function of jQuery to assign the 'selected' attribute to the desired tag

// USE THE FUNCTION TO REMOVE ALL ATTRIBUTES ALREADY SELECTED  
remove_selected();

// Set the tag <option> attribute to 'selected'
$('select option[value="ThatYouWant"]').prop({defaultSelected: true});

In HTML this gives :

<select>
  <option value="something">Something</option>
  <option value="ThatYouWant" selected>That you want</option>
  <option value="OtherValue">Other value</option>
</select>

It is clean and without burrs, thank you for your feedback and corrections, approve if you find this solution correct. Sincerely, Raf.

Source : https://api.jquery.com/prop/

SNS - Web et Informatique
  • 457
  • 4
  • 9
  • +1 for this alternative; unlike the accepted answer, this modifies the html. It helped me when modifying a dom node before further duplication. – Bob S Feb 24 '18 at 17:49
  • Thank you for the return, indeed, I have previously observed changes on the DOM but not on the HTML, it looks like a hack, but hey what can we do ... – SNS - Web et Informatique Mar 05 '18 at 00:31