我創建了 5 個表單，在頁面頂部我有一個select輸入。我通過div使用 Bootstrap 類將它們包裝在一個元素中來隱藏這些表單.d-none。我希望能夠從下拉串列中選擇一個選項，然后讓 jQuery 重新隱藏表單，然后顯示正確的表單。
所以，到目前為止，我只能撰寫一個腳本來檢查select_form的值。
Bootstrap v5 & jQuery v3.2.1
$('#select_form').on('change', function() {
alert(this.value)
/*
** Hide ALL Forms (1-5) by adding .d-none class
** Check Value of Select
** Match Select Value to the correct form's ID
** Display the correct form by adding .d-block class
*/
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<select name='select_from' class='form-control' label='Select Form' id='select_report' list='form_list' defaulttext='(Please Select)' />
<div class='form-row d-none' id='form_one'>Form Inputs Here</div>
<div class='form-row d-none' id='form_two'>Form Inputs Here</div>
<div class='form-row d-none' id='form_three'>Form Inputs Here</div>
<div class='form-row d-none' id='form_four'>Form Inputs Here</div>
<div class='form-row d-none' id='form_five'>Form Inputs Here</div>uj5u.com熱心網友回復：
你真的需要注意拼寫
您有 select_report 作為 ID 和 select_from 作為名稱。
我在這里使用您的 ID，如果 ID 與選擇的文本匹配，則關閉 d-none 類
$('#select_report').on('change', function() {
const text = $("option:selected", this).text().toLowerCase();
$(".form-row").each(function() {
$(this).toggleClass("d-none", this.id !== `form_${text}`)
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<select name='select_form' class='form-control' label='Select Form' id='select_report' list='form_list' defaulttext='(Please Select)'>
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<div class='form-row d-none' id='form_one'>Form 1 Inputs Here</div>
<div class='form-row d-none' id='form_two'>Form 2 Inputs Here</div>
<div class='form-row d-none' id='form_three'>Form 3 Inputs Here</div>
<div class='form-row d-none' id='form_four'>Form 4 Inputs Here</div>
<div class='form-row d-none' id='form_five'>Form 5 Inputs Here</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/373254.html
標籤：查询 形式 功能 展示 bootstrap-5