忍者ブログ

ひつ(じのひよこが)プログラミングします。
お仕事や趣味で困ったこととか、何度も「あれ?どうだったかしら」と調べたりしたこととか、作ったものとか、こどものこととかを書きます
★前は週末定期更新でしたが今は不定期更新です

2024/11    10« 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  »12

select の値を外から変更する

×

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

コメント

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

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);
});
PR

コメント

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

ブログ内検索

P R