我正在做一個小專案,其中包括一個帶有 jQ??uery 的自定義選擇框。
問題是,在第一次選擇一個選項后,就不可能再選擇另一個選項。
這是我的標記:
function bindSelectmenu() {
$('form').each(function() {
$(this).find('select').selectmenu({
appendTo: $(this).find('select').parent()
});
});
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form action="">
<fieldset class="contact-flex">
<label for="input" class="flex-grow-33">
Selectbox
</label>
<div class="input flex-grow-66">
<select name="input" id="input">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<span></span>
</fieldset>
</form>
我將 jQuery 3.6.0 與 jQuery UI 一起使用。
uj5u.com熱心網友回復:
您需要在每次選擇更改時觸發它。你的代碼可能是這樣的。
$( "#input" ).change(function() {
// do this
});
uj5u.com熱心網友回復:
考慮以下。
$(function() {
$('form').each(function(i, el) {
$('select', el).selectmenu({
appendTo: $('select', el).parent()
});
});
});
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<form action="">
<fieldset class="contact-flex">
<label for="input" class="flex-grow-33">
Selectbox
</label>
<div class="input flex-grow-66">
<select name="input" id="input">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</div>
<span></span>
</fieldset>
</form>
這幾乎與您使用的代碼相同,但它是在 Load 時執行的,而不是在函式內執行。如果您需要從函式內運行它,您可以這樣做,但最好更具體以確保this不會混淆。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/389409.html
標籤:javascript html 查询 网络 jquery-ui
上一篇:允許flexbox專案在溢位時位于另一個flexbox專案上方
下一篇:如何洗掉XML檔案的一部分?
