Javascript はドロップダウン リスト ボックスのテキスト値を取得します。サンプル コード_JavaScript スキル

最近、次の HTML コードなど、ユーザーがドロップダウン リストのオプションをクリックした後に選択したコンテンツを保存するという問題が発生しました:

Copy Code コードは次のとおりです。

北京
<オプション値="2" >上海
<オプション値="2" >広州 🎜>


つまり、ユーザーが「上海」列を選択した場合、「上海」という名前を保存する必要があります。実際、その方法は非常に簡単です。次の JavaScript コードを見てください:

コードをコピー コードは次のとおりです:

function isSelected (value) {

var cityName;
var city = document.getElementById("city");
//選択された都市名を取得します
for(i=0;iif(city[i].selected==true){
cityName = city[i].innerText; //キーポイント
alert("cityName:" cityName); }
}


次のこともできます:

コードをコピーします コードは次のとおりです。 function isSelected(value) {

var city = document.getElementById("city");

alert(city.options[city.selectedIndex].innerText);
}


大まかに説明すると、まず HTML ページにドロップダウン ボックスがあり、そのドロップダウン ボックスに "city" ID が定義され、onchange がイベントがバインドされており、このイベントを通じて JavaScript 関数が呼び出されます。

JavaScript 関数では、現在のドロップダウン ボックスのノード要素は Document オブジェクトを通じて取得されます。ノードの値は 1 つだけではないため、ループすることで各オプションの値を取得できます。ノード。ループ中に、現在のオプションが選択されているかどうかが判断され、選択されている場合は、city[i].innerText メソッドを使用して、現在選択されているテキスト値を取得します。もちろん、オプションの値を取得する必要がある場合は、 city[i].value.

を実行するだけで、IE では上記の方法で目的の結果を得ることができます。しかし、FIREFOX でテストしたところ、この方法は機能しないことが判明し、最終的に情報を調べて別の方法を見つけました。 city[i].innerText を city[i].text に変更するだけです。この方法はIEでもFIXEFOXでも使えます！