erere erere - 1 month ago 7
HTML Question

DropDown Menu not displaying correctly

I'm trying to make a simple dropdown menu, and add 'ok' and 'cancel buttons.
I have the code:



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





I want to be able to click on the Button, and it should open a window with a dropdown menu with the ability to select one of the options, and an ok and cancel button.

However, this seems to display the button and the menu at the same time (no popup), and I'm also not sure on how to add ok, and cancel buttons to it, any ideas?

I've tried using an onclick mechanisms in the html code and then actually using a function int the javascript portion, but that doesn't really help.

Answer

Here the dialog documentation.
Take a look, there are all methods and options to custom your own .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" />