Question

我有2个对话框表单Add region和Add country。每种模式形式都有<select>个选项。可以选择在每个模态形式中重复的选项，因此我将它们放在一个类中并按display:none设置它，因此id不会重复。

当我需要获取所选项目的ID时，它会给我一个未定义的值。我正在使用$(".region_options").children(":selected").attr("id");来获取所选选项的ID。

这是我的代码。和jsFiddle

<!doctype html>
<html lang="en">
<head>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>
  $(function() {

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": function() {
          var region_id =  $(".region_options").children(":selected").attr("id");
          alert(region_id)
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },

    });

    $( "#create-user" ).button().click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });


  </script>
</head>
<body>

<div id="dialog-form" title="Create new user">
    <select class="region_options">
        <option>Select Region</option>
        <option id="1">Asia / Pacific</option>
        <option id="2">North America</option>
        <option id="3">sdgvgwqrg</option>
    </select>
</div>

<div id="dialog-form1" title="Create new user" style="display:none">
   <select class="region_options">
        <option>Select Region</option>
        <option id="1">Asia / Pacific</option>
        <option id="2">North America</option>
        <option id="3">sdgvgwqrg</option>
    </select>
</div>


<button id="create-user">Create new user</button>


</body>
</html>

Answer 1

<option>个元素由value属性标识，而不是id。

<select class="region_options">
    <option>Select Region</option>
    <option value="1">Asia / Pacific</option>
    <option value="2">North America</option>
    <option value="3">sdgvgwqrg</option>
</select>

使用val()方法读取或写入所选选项的值。

var region = $("#dialog-form .region_options").val();
$("#dialog-form1 .region_options").val(region);

Answer 2

您需要更改您正在使用的行：

$(".region_options").children(":selected").attr("id");

为：

$(".region_options").children(":selected").parent().parent().attr("id")

Updated Fiddle

Answer 3

它可以使用我已经在你的js上编写javascript代码的id

`$(function() {

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": function() {
          var region_id =  $("#select_region").val();
          alert(region_id);
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },

    });

    $( "#create-user" ).button().click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });
  });`

，html代码为：

<div id="dialog-form" title="Create new user">
    <select id="select_region" class="region_options">
        <option>Select Region</option>
        <option value="1">Asia / Pacific</option>
        <option value="2">North America</option>
        <option value="3">sdgvgwqrg</option>
    </select>
</div>

<div id="dialog-form1" title="Create new user" style="display:none">
   <select class="region_options">
        <option>Select Region</option>
        <option value="1">Asia / Pacific</option>
        <option value="2">North America</option>
        <option value="3">sdgvgwqrg</option>
    </select>
</div>


<button id="create-user">Create new user</button>

使用id作为属性，尽管使用了类<select id="select_region" class="region_options">

Answer 4

当this引用模态（您的#dialog-form元素）时，我们可以选择其中的select元素而不是所有元素。

$(function() {

    $( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": function() {

          var region_id = $(this).find(".region_options").val(); // Solution

          if (!region_id)
            alert('Please select a region.');
          else
            alert('Selected region: ' + region_id);
        },
        "Cancel": function() {
          $( this ).dialog( "close" );
        }
      }
    });

    $( "#create-user" ).button().click(function() {
        $( "#dialog-form" ).dialog( "open" );
      });

  });

请参阅val和find。

Answer 5

您无需更改标记或使用.val功能。你可以得到这样的ID：

$(function() {

  $( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
      "Create an account": function() {
          var region_id = $(this).find(".region_options option:selected").attr("id");
          alert(region_id);
      },
      Cancel: function() {
        $( this ).dialog( "close" );
      }
    },

  });

  $( "#create-user" ).button().click(function() {
      $( "#dialog-form" ).dialog( "open" );
    });
});

这是你的jsfiddle更新：

http://jsfiddle.net/UGpZH/13/

问题是您选择了错误的下拉列表。

获取所选选项的ID

5 个答案: