显示值的代码和显示 [object Object] 的选定选项答案

【问题标题】：Code to display value and selected option showing [object Object] instead显示值的代码和显示 [object Object] 的选定选项
【发布时间】：2019-09-07 06:09:42
【问题描述】：

我创建了一个 jQuery 代码，它应该显示选定的选项以及选定的值。但是，如果我选择“状态”选项，则输出为：

“你有 Selected[object Object] 并且它的值是 state”

$("document").ready(function() {
      $("#location").prepend("<option value=\"country\">country</option>");
      $("#location").append("<option value=\"city\">city</option>");
      $("#location").append("<option value=\"area\">Area</option>");
      $("#gender").append("<option value=\"male\">Male</option>");
      $("#gender").append("<option value=\"female\">Female</option>");
      $("#gender").append("<option value=\"other\">Other</option>");
      $('select').on('change', function(e) {
        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;

        $("h2").html("You had Selected " + optionSelected + "and its value is " + valueSelected);
      });

    });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <select id="location">
    <!--Default option-->
    <option selected="selected">Location</option>
    <option>state</option>
  </select>
  <select id="gender">
    <!--Default option-->
    <option selected="selected">Gender</option>
  </select>
  <br>
  <h2></h2>

如何解决 [object Object] 并显示我的选项？

【问题讨论】：

标签： jquery tags option selected

【解决方案1】：

使用$('#id_of_the_element :selected').text();

var optionSelected = $('#location :selected').text();
var valueSelected = $('#gender :selected').text();

<!DOCTYPE html>
<html>

<head>
  <title>Creating and Changing Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    $("document").ready(function() {
      $("#location").prepend("<option value=\"country\">country</option>");
      $("#location").append("<option value=\"city\">city</option>");
      $("#location").append("<option value=\"area\">Area</option>");
      $("#gender").append("<option value=\"male\">Male</option>");
      $("#gender").append("<option value=\"female\">Female</option>");
      $("#gender").append("<option value=\"other\">Other</option>");

      $('select').on('change', function(e) {
        var optionSelected = $('#location :selected').text();
        var valueSelected = $('#gender :selected').text();
        $("h2").html("You had Selected " + optionSelected + " and its value is " + valueSelected);
      });
    });
  </script>
</head>

<body>
  <select id="location">
    <!--Default option-->
    <option selected="selected">Location</option>
    <option>state</option>
  </select>
  <select id="gender">
    <!--Default option-->
    <option selected="selected">Gender</option>
  </select>
  <br>
  <h2></h2>
</body>

</html>

【讨论】：

【解决方案2】：

只需添加带有 optionselected 的 .val()。像这样： $( "h2" ).html("You have Selected "+optionSelected.val() +" 其值为 "+valueSelected); 要获取所选选项的值，我们使用 .val()

【讨论】：

$( "h2" ).html("You have Selected "+optionSelected.val() +" 其值为 "+valueSelected); 它不会给出预期的操作。它为 optionSelected.val() 和 valueSelected 打印相同的选项（最后选择的选项）。

【解决方案3】：

我修改了你的代码。其实，这正是我所需要的。

<!DOCTYPE html>
<html>
<head>
  <title>Creating and Changing Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    $("document").ready(function() {
      $("#location").prepend("<option value=\"ccountry\">country</option>");
      $("#location").append("<option value=\"ccity\">city</option>");
      $("#location").append("<option value=\"aarea\">Area</option>");
      $("#gender").append("<option value=\"male\">Male</option>");
      $("#gender").append("<option value=\"female\">Female</option>");
      $("#gender").append("<option value=\"other\">Other</option>");
      $('select').on('change', function(e) {
        var optionSelected = $('option:selected',this).text();
        var valueSelected = this.value;
        $("h2").html("You had Selected " + optionSelected + " and its value is " + valueSelected);
      });
    });
  </script>
</head>
<body>
  <select id="location">
    <!--Default option-->
    <option selected="selected">Location</option>
    <option>state</option>
  </select>
  <select id="gender">
    <!--Default option-->
    <option selected="selected">Gender</option>
  </select>
  <br>
  <h2></h2>
</body>
</html>

【讨论】：