2016-07-21 18 views
4

ユーザーが選択した値が自動的に表示される選択ボックスをロードします。選択したオプション値を設定します

ユーザー情報でサーバーからJsonデータを受信して​​います。データの サンプルがある:{"color":"red"}私のHTMLコードで

私はこのような選択オプションがあります:

<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 

を私はデフォルトとして赤の値を作るためにこのコードを試みたが、動作していません。

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

助けが必要ですか?あなたはjQueryを使って、この質問あなただけの直接selectval()設定することができますタグの付いてきたように

+0

'data'は配列ですか? JSONがサーバーから解析されましたか? –

+1

check [demo](https://jsfiddle.net/uos8hpL2/) – guradio

+0

[選択ボックスの選択されたオプションを設定する]の重複可能性があります。(http://stackoverflow.com/questions/4680075/set-selected-option-of- select-box) – guradio

答えて

7

:多くの研究の後

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>

+1

ロリーの答えは正しいと思います。値を更新するのではなく、選択インデックスを設定しています。 –

+0

彼は彼が好きなだけdownvoteすることができます:D。この回答は正しいですし、私はこれが尋ねられて正しく答えられたのは初めてではないと思います。 – TehSphinX

+0

これとは何が違うのですか? document.getElementById( 'input_user')。value = user_color; –

1

は、私は最終的にjQueryのドキュメントを参照してくださいに戻って行きました

1 /既に「選択された」属性を持つタグのすべての属性を削除する

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

2 /私はこれが与える希望タグHTMLで

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

に '選択した' 属性を割り当てるためのjQueryの小道具()関数を使用します。

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

それはきれいですバリのない場合は、フィードバックと訂正に感謝します。この解決策が正しいことがわかったら承認してください。心から、Raf。

ソース:https://api.jquery.com/prop/

+0

+1;受け入れられた答えとは異なり、これはhtmlを変更します。さらなる複製の前にDOMノードを変更すると、私の助けになりました。 –

+0

帰ってくれてありがとう、確かに、以前はDOMの変更を見てきましたが、HTMLではなく、ハックのように見えましたが、どうしたらいいですか... –

関連する問題