[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
ただいまコメントを受けつけておりません。
何かを選択した場合、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); });
ただいまコメントを受けつけておりません。