jQuery - セレクトボックス(コンボボックス)の設定と取得

公開日：2018-12-21 更新日：2019-05-14
[jQuery]

1. 概要

セレクトボックス(コンボボックス)の設定と取得を行います。
value ではなく、表示されている項目の値を取得したい場合は、value 取得後に、属性セレクタで value を指定して取得します。

//項目の選択
$(selectタグへのセレクタ).val(選択したい項目の value)

//選択されている項目の value の取得
$(selectタグへのセレクタ).val()

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <select id="fruits" size="3">
    <option value="A"                    >apple</option>
    <option value="B"                    >orange</option>
    <option value="C" selected="selected">banana</option>
  </select>
  <input type="button" value="取得"          onclick="get()" />　
  <input type="button" value="先頭を選択する" onclick="set()" /><br /><br />
  <div id="msg1"></div>
  <div id="msg2"></div>
  <script>

    function get() {
      //選択されている項目の value を取得します
      var value = $("#fruits").val();

      //画面表示
      $("#msg1").html( value );
      $("#msg2").html( $("#fruits [value=" + value + "]").html() );
    }

    function set() {
      //value="A" の項目を選択します
      $("#fruits").val("A");
    }

  </script>
</body></html>

実行結果：画面



Tag

New Article