6

次のようなデータリスト ボックスがあります。

<td>
    <input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
    <datalist id="screens.screenid-datalist">
        <option value="Login"></option>
        <option value="ScreenCreator"></option>
    </datalist>
    <label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
</td>

そして、このデータリストから値を取得する必要がある JavaScript コードがあります。

値を取得するために次のすべてのことを試しました

document.getElementById('screens.screenid').value
document.getElementById('screens.screenid').text
document.getElementById('screens.screenid').innerHTML
document.getElementById('screens.screenid').option

それはうまくいかないようです。

JavaScript または HTML コードに何か問題がありますか?

コンソールを使用して値を取得すると: コンソールを使用して値を取得するとき

4

1 に答える 1

6

これを理解するのに時間がかかりました。以下の私のコードを見てください：

function validate(){
    console.log(document.getElementById('screens.screenid').value); //WORKS

    console.log(document.getElementById('screens.screenid').text);
    console.log(document.getElementById('screens.screenid').innerHTML);
    console.log(document.getElementById('screens.screenid').option);

}
<input list="screens.screenid-datalist" type="text" id="screens.screenid" onblur="validate('0','0','jacques')">
   <datalist id="screens.screenid-datalist">
	  <option value="Login"></option>
	  <option value="ScreenCreator"></option>
  </datalist>
<label id="val-screens.screenid" class="Label_Error" style="visibility: hidden;">*</label>
<a href='#' onclick="validate">validate</a>

最初のものはvalue期待どおりに取得されますが、text optionここにテキストがないという明らかな理由で機能しません。また、innerHTML値ではなく子htmlを取得します。さらにinnerHTML、入力リストは取得できませんが、データリストは取得できます。

これを試して ：console.log(document.getElementById('screens.screenid-datalist').innerHTML);

私はそれを試してみましたが、innerHTML何の手間もかかりませんでした:

<option value="Login"></option>
<option value="ScreenCreator"></option>

ここでビンを見つけてください：http://jsbin.com/inigaj/1/edit

于 2013-08-15T09:38:11.570 に答える