jQuery UI 选择框在第二次输入时不起作用答案

【问题标题】：jQuery UI Selectbox doesn't work at second enterjQuery UI 选择框在第二次输入时不起作用
【发布时间】：2022-01-22 23:18:26
【问题描述】：

我正在做一个小项目，其中包括一个带有 jQuery 的自定义选择框。

问题是，第一次选择一个选项后，无法再选择另一个选项。

这是我的标记：

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 UI 的 jQuery 3.6.0。

【问题讨论】：

我将您的代码转换为可运行的 sn-p。当我使用“运行代码 sn-p”按钮时，我无法重现该问题。我可以多次更改选择框而不会出现问题。
正在执行的代码输出默认的 HTML 选择框，而不是 jquery 的选择框
请edit您的问题并更改示例代码以演示问题。

标签： javascript html jquery web jquery-ui

【解决方案1】：

考虑以下内容。

$(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>

这与您使用的代码几乎相同，但它是在加载时执行的，而不是在函数中执行的。如果您需要在 Function 中运行它，您可以这样做，但最好更加具体，以确保不会混淆 this。

【讨论】：