質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • jQuery

    8147questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7533questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

jquery select でchangeした時にoptionのidを取得してすべての値を変える

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 4,112

selafu-t

score 9

題名のとおりですが、下記がその条件となります。

1 selectをプルダウンで選択を変えたら他のselect の中のoptionのidが同一の
  ものの頭に○をつけたい。ただし変更されたら元の選択されていた値の前についていた○は消え新しく選択されたもののみ頭に○をつける

2 他のselectでも選択を変えたらその他のselect の中のoptionのidが同一の
  ものの頭に○をつけたい。

3 例

<select name="key1" id="key_id_1">の<option id="a" value="a">a</option>が選択されたら
<select name="key1" id="key_id_1">の<option id="a" value="a">○a</option>となり

<select name="key2" id="key_id_2">の<option  id="a" value="a">a</option>と
<select name="key3" id="key_id_3">の<option  id="a" value="a">a</option>も

<select name="key2" id="key_id_2">の<option  id="a" value="a">○a</option>
<select name="key3" id="key_id_3">の<option  id="a" value="a">○a</option>となる

ただし
<select name="key1" id="key_id_1">の<option id="a" value="a">○a</option>が選択状態で
<select name="key1" id="key_id_1">の<option id="b" value="b">b</option>と変えたら

<select name="key1" id="key_id_1">の<option id="a" value="a">a</option>となり

<select name="key1" id="key_id_1">の<option id="b" value="b">○b</option>
<select name="key2" id="key_id_2">の<option id="b" value="b">○b</option>
<select name="key3" id="key_id_3">の<option id="b" value="v">○b</option>となる

又上記の状態で
<select name="key2" id="key_id_2">の<option id="b" value="b">○b</option>を
<select name="key2" id="key_id_2">の<option id="c" value="c">c</option>と変えたら

<select name="key1" id="key_id_1">の<option id="a" value="a">a</option>
<select name="key1" id="key_id_1">の<option id="b" value="b">○b</option>
<select name="key1" id="key_id_1">の<option id="c" value="c">○c</option>

<select name="key2" id="key_id_2">の<option id="a" value="a">a</option>
<select name="key2" id="key_id_2">の<option id="b" value="b">○b</option>
<select name="key2" id="key_id_2">の<option id="c" value="c">○c</option>

<select name="key3" id="key_id_3">の<option id="a" value="a">a</option>
<select name="key3" id="key_id_3">の<option id="b" value="b">○b</option>
<select name="key3" id="key_id_3">の<option id="c" value="c">○c</option>
となるようにしたい

4 作成途中のHTML

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
  //idが変更されたら
  $(function($) {
      $("[id^='key_id_']").change(function() {
          var id = $('[id^=key_id_] option:selected').attr("id");
          var txt = $('[id="+id+"]').text();
          console.log(id);
          $("[id="+id+"]").html("○"+txt);
      });
  });
  </script>

</head>
<body>
<select name="key1" id="key_id_1">
    <option id="a" value="a">a</option>
    <option id="b" value="b">b</option>
    <option id="c" value="c">c</option>
    <option id="d" value="d">d</option>
</select>

<br>
<select name="key2" id="key_id_2">
    <option  id="a" value="a">a</option>
    <option  id="b" value="b">b</option>
    <option  id="c" value="c">c</option>
    <option  id="d" value="d">d</option>
</select>
<br>
<select name="key3" id="key_id_3">
    <option id="a" value="a">a</option>
    <option id="b" value="b">b</option>
    <option id="c" value="c">c</option>
    <option id="d" value="d">d</option>
</select>

</body>
</html>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
  $(function($) {
      $('[id^=key_id_]').change(function() {

         //現在選択
          var keydata = $('#key_id_1 option:selected').attr("id");
          var keyoption = $('#key_id_1').children();

          var keydata2 = $('#key_id_2 option:selected').attr("id");
          var keyoption2 = $('#key_id_2').children();

          var keydata3 = $('#key_id_3 option:selected').attr("id");
          var keyoption3 = $('#key_id_3').children();

          var keydata4 = $('#key_id_4 option:selected').attr("id");
          var keyoption4 = $('#key_id_4').children();

          var keydata5 = $('#key_id_5 option:selected').attr("id");
          var keyoption5 = $('#key_id_5').children();

          for( var i=0; i<keyoption.length; i++ ){
               var optionid = keyoption.eq(i).attr("id");
               var txt = $('#'+optionid).text();
               /*
               var optionid2 = keyoption2.eq(i).attr("id");
               var optionid3 = keyoption3.eq(i).attr("id");
               var optionid4 = keyoption4.eq(i).attr("id");
               var optionid5 = keyoption5.eq(i).attr("id");

               var txt2 = $('#'+optionid2).text();
               var txt3 = $('#'+optionid3).text();
               var txt4 = $('#'+optionid4).text();
               var txt5 = $('#'+optionid5).text();
*/
               if(keydata == optionid){
                   $('[id='+optionid+']').text(txt.replace(/●/g,""));
                   $('[id='+optionid+']').prepend("●");
               }else if (keydata2 == optionid) {
                   $('[id='+optionid+']').text(txt.replace(/●/g,""));
                   $('[id='+optionid+']').prepend("●");
               }else if (keydata3 == optionid) {
                   $('[id='+optionid+']').text(txt.replace(/●/g,""));
                   $('[id='+optionid+']').prepend("●");
               }else if (keydata4 == optionid) {
                   $('[id='+optionid+']').text(txt.replace(/●/g,""));
                   $('[id='+optionid+']').prepend("●");
               }else if (keydata5 == optionid) {
                   $('[id='+optionid+']').text(txt.replace(/●/g,""));
                   $('[id='+optionid+']').prepend("●");
               }else {
                   $('[id='+optionid+']').text(txt.replace(/●/g,""));
               }

          }

      });
  });
  </script>

</head>
<body>
<select name="key1" id="key_id_1">
    <option id="1" value="a">a</option>
    <option id="2" value="b">b</option>
    <option id="3" value="c">c</option>
    <option id="4" value="d">d</option>
</select>

<br><br><br>
<select name="key2" id="key_id_2">
    <option  id="1" value="a">a</option>
    <option  id="2" value="b">b</option>
    <option  id="3" value="c">c</option>
    <option  id="4" value="d">d</option>
</select>
<br><br><br>
<select name="key3" id="key_id_3">
    <option id="1" value="a">a</option>
    <option id="2" value="b">b</option>
    <option id="3" value="c">c</option>
    <option id="4" value="d">d</option>
</select>
<br><br><br>
<select name="key4" id="key_id_4">
    <option  id="1" value="a">a</option>
    <option  id="2" value="b">b</option>
    <option  id="3" value="c">c</option>
    <option  id="4" value="d">d</option>
</select>
<br><br><br>
<select name="key5" id="key_id_5">
    <option  id="1" value="a">a</option>
    <option  id="2" value="b">b</option>
    <option  id="3" value="c">c</option>
    <option  id="4" value="d">d</option>
</select>
<br><br><br>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

jQuery(function($) {
  var selectList = $("select");
  var optionList = selectList.children("option");
  selectList.on("change", function() {
    var selectedValue = $(this).val();

    optionList.each(function() {
      var optionObj = $(this);
      var optionLabel = optionObj.text().replace("○", "");
      optionObj.text(optionLabel);
      if (optionObj.val() == selectedValue) {
        optionObj.text("○" + optionLabel);
      }
    });
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/18 22:36

    あー、各selectがこういう風に選択された場合
    <select name="key1" id="key_id_1">の<option id="a" value="a">a</option>
    <select name="key2" id="key_id_2">の<option id="b" value="b">b</option>
    <select name="key3" id="key_id_3">の<option id="c" value="c">c</option>

    が選択状態の時には

    <select name="key1" id="key_id_1">
    <option id="a" value="a">○a</option>
    <option id="b" value="b">○b</option>
    <option id="c" value="c">○c</option>
    <option id="d" value="d">d</option>
    </select>

    <select name="key2" id="key_id_2">
    <option id="a" value="a">○a</option>
    <option id="b" value="b">○b</option>
    <option id="c" value="c">○c</option>
    <option id="d" value="d">d</option>
    </select>

    <select name="key3" id="key_id_3">
    <option id="a" value="a">○a</option>
    <option id="b" value="b">○b</option>
    <option id="c" value="c">○c</option>
    <option id="d" value="d">d</option>
    </select>

    となってほしいのです・・・・

    キャンセル

同じタグがついた質問を見る

  • jQuery

    8147questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    7533questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。