select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

2020.11.06
プロモーションが含まれています

select・optionタグをjQueryで、プルダウンの選択値を取得、変更する


selectタグと、optionタグ(プルダウン)をcssとjQueryでカスタマイズしていきます。
cssで見た目を、jQueryで選択されている値の変更・取得などまとめました。

jQuery関連記事

関連記事をもっとみる

select要素とは？

「select要素」は、よくフォーム内でユーザーに選択肢を選んで貰う場合に使われるHTML要素です。

<SELECT>はセレクトボックスを作成するタグです。 セレクトボックス内の選択肢は<OPTION>タグで指定します。

今回は、下記のHTMLをカスタマイズしていきます。

See the Pen
yLJqVgX by むぅ (@mugenweb) on CodePen.light

HTML

<select name="pref_id" id="pref_id" class="pref_id">
  <option value="" hidden>選択</option>
  <option value="21">岐阜県</option>
  <option value="22">静岡県</option>
  <option value="23">愛知県</option>
  <option value="24" selected>三重県</option>
</select>

selectタグの使い方と属性

selectタグは、選択肢の箱を作るイメージです。
箱の中に、optionタグの選択肢を入れるようなイメージで使用します。

name属性

selectタグについている、name属性はデータを送るときに利用されるデータの名前で使用するので、データ送信の必要がある場合は必須です。

id属性

selectタグについている、id属性はjQueryで選択値の取得や変更で使用していきます。

class属性

selectタグについている、class属性はcssでデザインの変更で使用していきます。

selected属性

optionタグのテキスト「三重県」にselected属性がついています。
こうすることで、selected属性がついた選択肢は、ページを開いた時に、最初から選択されている状態になります。

hidden属性

optionタグのテキスト「選択」にhidden属性がついています。
こうすることで、hidden属性がついた選択肢は、選ぶことができなくなります。
選択肢を絞ることで、ユーザーに優しいフォームになります。

cssでselectタグのデザインをカスタマイズする

cssでselectタグのデザインを簡単に変更していきます。
下記のcssで基本的なカスタマイズをしていきます。

css

select{
  width: 25%;
  height: 40px;
  display: block;
  margin: 1.5rem auto;
  padding: 8px 12px;
  text-indent: 0.01px;
  border: 1px solid #ddd;
  color: #828c9a;
  border-radius: 3px;
  outline: none;
}
select option{
  background-color: #fff;
  color: #333;
}

cssの:hover・:focusでデザインを変更する

cssの疑似要素の、:hoverと、:focusでselectタグのデザインを変更してみます。上記cssに追記したものが下記です。

See the Pen yLJxBpX by むぅ (@mugenweb)
on CodePen.light

css

select:hover {
  background-color:#cde2a3;
}

select:focus {
  background-color:#a9d1e2;
}

appearanceを指定して矢印のデザインを消す

自動的に各ブラウザにおいての、標準的なUIの外観になっているので、それをリセットする必要があります。
例えばiOSのsafariで、フォーム部品のデザインを変更しようとしてもborder-radius: 0;が効かないなどの例があります。

appearanceをnoneに指定することで、selectタグとしての外観をリセットさせることで、矢印が消えるという仕組みです。

デザインの変更をしたい場合は、一度デザインをリセットしてから新しくデザインしなおすという方法で行いましょう。

See the Pen rNLZBQv by むぅ (@mugenweb)
on CodePen.light

css

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

選択されたvalueの値をjQueryで取得する

selectタグが変更された時に、選択されたoptionタグのvalueの値をjQueryで取得してみます。
取得した値がわかりやすいように、結果をHTMLに出力します。

See the Pen RwRYbzP by むぅ (@mugenweb)
on CodePen.light

HTML

<select name="pref_id" id="pref_id" class="pref_id">
  <option value="" hidden>選択</option>
  <option value="21">岐阜県</option>
  <option value="22">静岡県</option>
  <option value="23">愛知県</option>
  <option value="24" selected>三重県</option>
</select>
<div id="result"></div>

JavaScript

$('#pref_id').change(function() {
  var result = $('option:selected').val();

  $('#result').text(result);
});

上記の例では、#pref_idが変更されたときに、$('option:selected')で選択されているoptionタグのval()値を取得するという処理が行われています。
最後に、取得した値を#resultに反映しています。

選択されたoptionタグのテキストをjQueryで取得する

selectタグが変更された時に、選択されたoptionタグのテキストをjQueryで取得してみます。
取得した値がわかりやすいように、結果をHTMLに出力します。

See the Pen eYzLYYj by むぅ (@mugenweb)
on CodePen.light

HTML

<select name="pref_id" id="pref_id" class="pref_id">
  <option value="" hidden>選択</option>
  <option value="21">岐阜県</option>
  <option value="22">静岡県</option>
  <option value="23">愛知県</option>
  <option value="24" selected>三重県</option>
</select>
<div id="result"></div>

JavaScript

$('#pref_id').change(function() {
  var result = $('option:selected').text();

  $('#result').text(result);
});

上記の例では、#pref_idが変更されたときに、$('option:selected')で選択されているoptionタグのval()値を取得するという処理が行われています。
最後に、取得した値を#resultに反映しています。

jQueryで選択(selected)状態にする1

jQueryから、selectタグの選択項目を制御してみたいので、ラジオボタン群とselectタグを使ったサンプルを作成してみました。

See the Pen
OJXoPNE by むぅ (@mugenweb) on CodePen.light

HTML

<div id="result">
  <input type="radio" value="岐阜県" id="p1" name="choose">
  <label for="p1">岐阜県</label>
  <input type="radio" value="静岡県" id="p2" name="choose">
  <label for="p2">静岡県</label>
  <input type="radio" value="愛知県" id="p3" name="choose">
  <label for="p3">愛知県</label>
  <input type="radio" value="三重県" id="p4" name="choose">
  <label for="p4">三重県</label>
</div>

<select id="pref_id">
  <option value="" hidden>選択</option>
  <option value="岐阜県">岐阜県</option>
  <option value="静岡県">静岡県</option>
  <option value="愛知県">愛知県</option>
  <option value="三重県">三重県</option>
</select>

JavaScript

$('input[name="choose"]').change(function() {
  var result = $(this).val();
  
  $('#pref_id').val(result);
});

上記の例では、radioボタンなので、input[name="choose"]が変更されたときに、まずresultに選択された値を格納します。
その後、#pref_id内からvalueが合致したものが選択され、jQueryからselectタグを制御できます。
お互いのvalueが一緒なので簡単ですね。

radioボタンからしか制御できないのは気持ち悪いので、selectタグからradioボタンを制御できるものも作りました。

JavaScript

$('input[name="choose"]').change(function() {
  var result = $(this).val();
  
  $('#pref_id').val(result);
});

$('#pref_id').change(function() {
  var result = $('#pref_id option:selected').val();
  $('input[name="choose"]').each(function(){
    if($(this).val() == result){
      $(this).prop('checked', true);
    }
  });
});

jQueryで選択(selected)状態にする2

上記のサンプルはvalueの値とテキストが同じものでしたが、違うもの下記仕様のselectタグを2つ使ったサンプルを作成してみました。

1.　「選択値によって変化する」selectタグのvalueの値とテキストが異なる。
2.　「選択する側」を変更したときに選ばれた値を取得。
3.　「選択値によって変化する」のvalueの中から、値が一致するものを選択状態にする。

See the Pen
abZabBr by むぅ (@mugenweb) on CodePen.light

HTML

<p>選択する側</p>
<select id="choose">
  <option value="" hidden>選択</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
</select>

<p>選択値によって変化する</p>
<select id="pref_id" disabled>
  <option value="" hidden>選択</option>
  <option value="21">岐阜県</option>
  <option value="22">静岡県</option>
  <option value="23">愛知県</option>
  <option value="24">三重県</option>
</select>

JavaScript

$('#choose').change(function() {
  var result = $('#choose option:selected').val();
  $('#pref_id option').each(function () {
    if ($(this).val() == result) {
      $(this).prop('selected', true);
    }
  })
});

上記の例では、#chooseが変更されたときに、まずresultに選択された値を格納します。
その後、#pref_id内の全てのoptionタグに対して、合致した場合、$(this).prop('selected', true);で、selected状態にしています。

コメント

タイトルとURLをコピーしました