web-dev-qa-db-ja.com

選択要素から選択オプションを取得

次のように、選択したオプションをドロップダウンから取得し、別のアイテムにそのテキストを入力しようとしています。 IEは嵐を呼び起こし、Firefoxでは機能しません：

$('#ddlCodes').change(function() {
  $('#txtEntry2').text('#ddlCodes option:selected').text();
});

私は何が間違っていますか？

jqueryhtml-select
93
Matt

これは短いバージョンです：

$('#ddlCodes').change(function() {
  $('#txtEntry2').text($(this).find(":selected").text());
});

karim79 要素名txtEntry2がテキストボックスである可能性があることから判断すると、良いキャッチになりました。何らかの入力であれば、代わりに.val()を使用するか、次のように.text()を使用する必要があります。

  $('#txtEntry2').val($(this).find(":selected").text());

「何が悪いの？」質問の一部：.text()はセレクターを使用せず、設定したいテキストを使用するか、すでにそこにあるテキストを返すものを使用しません。したがって、上記のように、必要なテキストをフェッチし、設定するオブジェクトの.text(string)メソッドに配置する必要があります。

186
Nick Craver

これを試して：

$('#ddlCodes').change(function() {
  var option = this.options[this.selectedIndex];
  $('#txtEntry2').text($(option).text());
});
15
Pointy

動作するはずの短いバージョンを次に示します。

 $('#ddlCodes').change(function() {
      $('#txtEntry2').text(this.val());
    });
8
ThdK

JQueryが少ない場合：

<select name="ddlCodes"
 onchange="$('#txtEntry2').text(this.options[this.selectedIndex].value);">

this.options[this.selectedIndex].valueはプレーンJavaScriptです。

（ソース： German SelfHTML ）

4
koppor

次のコードを試してください

$('#ddlCodes').change(function() {
  $('#txtEntry2').val(  $('#ddlCodes :selected').text() );
});
2
ketan

選択した要素の数を知るには

$("select option:selected").length

選択したすべての要素の値を取得するには

    var str = "";
  $("select option:selected").each(function () {
        str += $(this).text() + " ";
      });
2
Sandeep Kumar

これは私のために働いた：

$("#SelectedCountryId_option_selected")[0].textContent
1
Mpho Makhubele

最初の部分は、次のようなドロップダウンメニューから要素を取得することです。

<select id="cycles_list">
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="10000">10000</option>
</select>

JQueryを介してキャプチャするには、次のようなことができます。

$('#cycles_list').change(function() {
    var mylist = document.getElementById("cycles_list");
    iterations = mylist.options[mylist.selectedIndex].text;
});

変数に値を保存したら、次のステップは、変数に保存された情報を選択したフォームフィールドまたはHTML要素に送信することです。 div pまたはカスタム要素の場合があります。

すなわち<p></p> OR <div></div>

次を使用します。

$（ 'p'）。html（iterations）; OR $（ 'div'）。html（iterations）;

次のようなテキストフィールドを入力する場合：

<input type="text" name="textform" id="textform"></input>

次を使用します。

$（ '＃textform'）。text = iterations;

もちろん、上記のすべてを少ないステップで実行できます。理解しやすいステップに分解すると、人々が学ぶのに役立つと信じています。これが役立つことを願っています！

1
HappyCoder

SelectedOptionsプロパティ（HTML5）を使用すると、選択したオプションを取得できます。

document.getElementbyId("id").selectedOptions;

これを行うことにより、JQueryを実現できます。

$("#id")[0].selectedOptions;

または

$("#id").prop("selectedOptions");

プロパティには、この選択された1つのオプションに類似したHTMLCollection配列が含まれます。

[<option value=​"1">​ABC</option>]

または複数選択

[<option value=​"1">​ABC</option>, <option value=​"2">​DEF</option> ...]
1
alejandro

上記は非常にうまく機能しますが、ドロップダウンテキストのjQueryタイプキャストを見逃しているようです。それ以外は、.val()を使用して、入力テキストタイプ要素のテキストを設定することをお勧めします。これらの変更により、コードは次のようになります。

    $('#txtEntry2').val($('#ddlCodes option:selected').text());
0
Amit Dash

これがすでにあり、jqueryを使用している場合、これがあなたの答えになります：

$（$（this）[0] .selectedOptions [0]）。text（）

0
tibi

このHTMLを考えます：

<select>
    <option value="0">One</option>
    <option value="1">Two</option>
</select>

JQuery v1.6 +の説明で選択：

var text1 = 'Two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);
0
Tariq