Выпадающее меню не отображается правильно

Я пытаюсь сделать простое выпадающее меню и добавить кнопки » ok » и «отмена».
У меня есть код:

  $("#dialog").hide();
  $("#target").click(function() {
    $("#dialog").show();
    $("#dialog").dialog();
  });
<!DOCTYPE html>
<html>

<body>
    <div id="dialog" title="Basic dialog">
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>
    <input type="button" id="target" value="click" />
</body>

</html>

Я хочу, чтобы иметь возможность нажать на кнопку, и он должен открыть окно с выпадающим меню с возможностью выбора одного из вариантов, и кнопку ok и отмена.

Тем не менее, это, кажется, отображать кнопку и меню в то же время (нет всплывающего окна), и я также не уверен, как добавить ok, и кнопки отмены к нему, какие-либо идеи?

Я пытался использовать механизмы onclick в html-коде, а затем фактически использовать функцию в части javascript, но это не очень помогает.

2 ответа

  1. Здесь диалоговая документация .
    Посмотрите, есть все методы и варианты, чтобы настроить свой собственный .dialog

      $("#dialog").hide();
      $("#target").click(function() {
        $("#dialog").show();
        $("#dialog").dialog();
      });
    
      $('#formBrands').submit(function(){
        $("#dialog").dialog('close');
      });
    .button {
      background-color: #52B3D9;
      color: white;
    }
       
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <div id="dialog" title="Basic dialog">
          <form id="formBrands" method="post" action="yourPHP.php">
          <select name="brands">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </select>
          <input type="submit" value="OK" />
          </form>
        </div>
        <input type="button" id="target" value="click" />
      

  2. Я добавляю 3 вещи в ваш код, и он работает для меня.

    1. библиотека jQuery.
    2. библиотека пользовательского интерфейса jQuery.
    3. Оберните код javascript в $(document).ready().

    Вот код:

    HTML:

    <div id="dialog" title="Basic dialog">
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </div>
    <input type="button" id="target" value="click" />
    

    Яваскрипт:

    $(document).ready(function() {
      $("#dialog").hide();
      $("#target").click(function() {
        $("#dialog").show();
        $("#dialog").dialog();
      });
    });
    

    Вы можете проверить работающую версию на jsFiddle .