何番目かを取得
サンプル
変更するとアラートが出ます
HTML+JS
selectボックスが変更された時、何番目のoptionが選択されたかを取得します。1個目が0、2個目が1…となります。selectタグにselectクラスを付けてます。クラス名は自由で大丈夫ですが、変更した場合はJSの.selectも変更してください。
<select class="select">
<option value="false">選択してください</option>
<option value="オプション1">オプション1</option>
<option value="オプション2">オプション2</option>
<option value="オプション3">オプション3</option>
</select>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function()
{
$(".select").change(function()
{
var index = $(this).prop("selectedIndex");
alert(index);
})
})
</script>selectボックスを切り替えた時、そのselectボックスの何個目が選択されているかを取得して、アラートで出力しています。
optionのvalueを取得
prop()をval()に変更するとvalueの値が取得できます。
サンプル
HTML+JS
<select class="select">
<option value="false">選択してください</option>
<option value="オプション1">オプション1</option>
<option value="オプション2">オプション2</option>
<option value="オプション3">オプション3</option>
</select>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function()
{
$(".select").change(function()
{
var val= $(this).val();
alert(val);
})
})
</script>selectボックスを切り替えた時、選択されているセレクトボックスのvalueの値を取得して、アラートで出力しています。
selectボックスが選択されたらボタンを押せるようにする方法
ボタンを押せない状態にしておいて、セレクトボックスが選択されたら押せるように切り替える方法です。
サンプル
HTML+JS
buttonタグを追加しています。要素にdisabledを付けて押せなくしておきます。
<select class="select">
<option value="false">選択してください</option>
<option value="オプション1">オプション1</option>
<option value="オプション2">オプション2</option>
<option value="オプション3">オプション3</option>
</select>
<button class="button" disabled>送信</button>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function()
{
$(".select").change(function()
{
var index = $(this).prop("selectedIndex");
var $button = $(".button");
if(index == 0)
{
$button.prop("disabled", true);
} else {
$button.prop("disabled", false);
}
})
})
</script>selectボックスを切り替えた時、そのselectボックスの何個目が選択されているかを取得して、0番目（選択してください）だった場合はボタンタグにdisabledを追加、0番目以外（オプション数字）だった場合、disabledを削除しています。
