jQuery UI Selectbox doesn't work at second enter-CodePudding

I am working on a little project, which includes a custom selectbox with jQuery.

The problem is, after selecting an option for the first time, it is impossible to select another option.

Here is my Markup:

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 >
        <label for="input" >
            Selectbox
        </label>
        <div >
            <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>

I am using jQuery 3.6.0 with jQuery UI.

CodePudding user response：

You need to trigger this at every select's change. Your code might be something like this.

   $( "#input" ).change(function() {
     // do this
   });

CodePudding user response：

Consider the following.

$(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 >
    <label for="input" >
            Selectbox
        </label>
    <div >
      <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>

This is almost the same code as you are using, yet it is executed at Load instead of from within a Function. If you need to run it from within a Function, you can do this, yet it is best to be more specific to ensure that this is not confused.