1

私はいくつかの検索を行いましたが、私は JavaScript と jQuery に非常に慣れていないため、これを行う方法がわかりません (または可能かどうか)。基本的に、私は2つの選択メニューと、テキストと同じではなく選択間で同じである各選択に関連付けられた値を持っています:

<select id="day1Breakfast">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>

<select id="day2Breakfast">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>

私がする必要があるのは、SELECT ID と OPTION VALUE に基づいて、選択したテキストを別の div に入力することです。たとえば、誰かが day2Breakfast SELECT から "Muffin" を選択した場合、アラート ("You selected Muffin for Day 2") が必要になります。これを使用して、ID を持つ div からテキストを検索できることを理解しています。

document.getElementById("day1Breakfast").text()

しかし、それは「ベーコンエッグとチーズマフィンベーグル」を返します。特定の SELECT ID と OPTION VALUE に関連付けられたテキストを取得するだけで済みます。

どうもありがとうございました！

4

4 に答える 4

7

.value要素を(バニラ JavaScript で)探していて.val()、jQuery にいます。さらに、選択した値のテキストを取得するにはoption:selected、要素内ですべてをリクエストするだけです。

// Event delegation on all select elements
$("select").on("change", function (e) {
  // When a select changes, find the selection option
  // Also, get the ID of the select element that changed
  var selected = $(this).find("option:selected"),
      fromElem = $(this).prop("id");
  // Output the new selected text, value, and ID of affected select
  console.log( selected.text(), selected.val(), fromElem );
});
于 2013-01-12T07:51:38.513 に答える
1

あなたはこのようなものが欲しい、

$("#day1Breakfast option[value='bec']").text();
于 2013-01-12T07:54:14.880 に答える
0

あなたのhtmlを少し修正しました。デモを参照http://jsfiddle.net/j6HU6/8/

HTML:

<select class="menu" name="day 1">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>

<select class="menu" name="day 2">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>

JS:

$('.menu').change(function(){
  alert('You chose ' + $(this).children('option:selected').text() + ' for ' + $(this).attr('name'));    
});
于 2013-01-12T08:01:11.883 に答える
0 
    <script type="text/javascript">
function fnc(myid,myvalue)
{
    alert("you've chosen "+myvalue+" from "+myid);
}
</script>

<select id="day1Breakfast" onChange="fnc(this.id,this.value)">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>

<select id="day2Breakfast" onChange="fnc(this.id,this.value)">
<option value="">Select One</option>
<option value="bec">Bacon Egg and Cheese</option>
<option value="muf">Muffin</option>
<option value="bag">Bagel</option>
</select>
于 2013-01-12T07:55:58.353 に答える