我有一个选择选项,如this:
<form action="#" class="modal-content">
<select class="form-select" id="value" name="value">
<option value="">Select an option</option>
<option value="1" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="1">Driver2</option>
<option value="2" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="2">Driver1</option>
<option value="3" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="3">Driver3</option>
<option value="4" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="4">Create date</option>
</select>
...
我想得到show模式的select选项的值。
例如,当我选择下面的选项时,我想显示bootstrap 5的模态,如this:
<option value="2" data-bs-toggle="modal" data-bs-target="#valueModal" data-id="2">Driver1</option>
我还有一个Bootstrap模态窗口:
<div class="modal fade" id="valueModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="valueModal" aria-hidden="true">
<div class="modal-dialog">
<form action="#" class="modal-content">
<input value="" name="option_id" type="hidden">
<div class="modal-header">
<h5 class="modal-title" id="valueModal">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<!-- Multi Forms -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
如果选择值value
,我将显示Bootstrap模态。
我试过这样做:
<script>
$("#value").bind("change", function () {
$('#valueModal').modal('show')(this.value === 'option_id');
}).change();
</script>
1条答案
按热度按时间3df52oht1#
您可以使用
selectElement.options
获取所有option
子标记,并且可以像数组一样通过索引访问它们。x一个一个一个一个x一个一个二个x