select の値を外から変更する

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/11/24 10:05

ただいまコメントを受けつけておりません。

select の値を外から変更する

何かを選択した場合、select の値をあわせて変更したい、とかそういったことがあってやってみた話。普通にやるのは簡単だったが、 jQuery Mobile 使っていた時が面倒だった。

<select id="change-select-from-out-of-select">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>

<span id="change-select-from-out-of-select-button-1" style="color:white;border:outset black 3px; background-color:gray; border-radius:5px;padding:3px;">1に変更</span>
<span id="change-select-from-out-of-select-button-2" style="color:white;border:outset black 3px; background-color:gray; border-radius:5px;padding:3px;">2に変更</span>
<span id="change-select-from-out-of-select-button-3" style="color:white;border:outset black 3px; background-color:gray; border-radius:5px;padding:3px;">3に変更</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
</script>

var $select = $('#change-select-from-out-of-select');

$('#change-select-from-out-of-select-button-1').click(function(e) {
  $select.val(1);
});
$('#change-select-from-out-of-select-button-2').click(function(e) {
  $select.val(2);
});
$('#change-select-from-out-of-select-button-3').click(function(e) {
  $select.val(3);
});

jQuery Mobile を使っている場合は次のように書いたらうまくいった。

var $select = $('#change-select-from-out-of-select');

$('#change-select-from-out-of-select-button-1').click(function(e) {
  var $selected = $switcher.children('[value="1"]');
  var caption = $selected.text();
  $select.val(1);
  $($select.parent().find('span>span')[0]).text(caption);
});

// value を引数として一般化する
function changeJQueryMobileSelect(value) {
  var $selected = $switcher.children('[value="' + value +'"]');
  var caption = $selected.text();
  $select.val(value);
  $($select.parent().find('span>span')[0]).text(caption);
}

$('#change-select-from-out-of-select-button-2').click(function(e) {
  changeJQueryMobileSelect(2);
});