Question

<body>
  <label for="country">Country : </label>
  <select id="country">
    <option>Please select</option>
    <option name="CountryRevenue">Revenue</option>
    <option name="CountryQuantity">Quantity</option>
    <option name="CountryGrossMargin">Gross Margin</option>
  </select>
  <div id="results"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>
    $("#country") = $(this).val();
    $("#results");
  </script>
</body>

如何插入不同的<div>，如下所示？如果选择了收入，则会先运行<div>。

如果选择了收入 - ＆gt;

<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto">

如果选择数量 - >

<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto">

Answer 1

似乎你不熟悉JS＆amp; HTML开发。您的代码中存在多个错误。特别是jquery没有很好地形成。选择选项应为value而不是name;

您可能需要阅读有关jQuery的书籍或在线阅读文档https://learn.jquery.com/或do a tutorial。在此之前，您还希望在codecademy

处对javascript有一些基本的了解

祝你旅程愉快！

$(function(){
  $('#country').on('change', function(){
      //hide all div inside the #results div
      $('#results div').hide();
      //show only the selected div (matched by select#country value)
      $('#'+$(this).val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <label for="country">Country :</label>
  <select id="country">
    <option>Please select</option>
    <option value="Revenue">Revenue</option>
    <option value="Quantity">Quantity</option>
    <option value="GrossMargin">Gross Margin</option>
  </select>
  <div id="results">
    <!-- I prefer the html all in here, but hidden than inserting with js. Note the display: none; css style. -->
    <div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto; display: none">Revenue</div>
    <div id="Quantity" style="min-width: 400px; height: 400px; margin: 0 auto; display: none">Quantity</div>
    <div id="GrossMargin" style="min-width: 400px; height: 400px; margin: 0 auto; display: none">Gross Margin</div>
  </div>

</body>

Answer 2

要达到预期效果，请使用以下选项

更改功能以获取所选值
使用if condition
使用append（）方法

HTML：

<body>
    <label for="country">Country : </label>
    <select id="country">
        <option>Please select</option>
        <option name="CountryRevenue">Revenue</option>
        <option name="CountryQuantity">Quantity</option>
        <option name="CountryGrossMargin">Gross Margin</option>
    </select>
    <div id="results"></div>
</body>

CSS：

#Revenue{
    background: red;
}

#Quantity{
    background: green;
}

#Gross{
    background: yellow;
}

JS：

$("#country").change(function() {
    var x = $("#country option:selected").text()
    if (x == 'Revenue') {
        $('#results').append('<div id="Revenue" style="min-width: 400px; height: 400px; margin: 0 auto">');
    }

    if (x == 'Quantity') {
        $('#results').append('<div id="Quantity" style="min-width: 400px; height: 400px; margin: 0 auto">');
    }

    if (x == 'Gross Margin') {
        $('#results').append('<div id="Gross" style="min-width: 400px; height: 400px; margin: 0 auto">');
    }
})

Codepen：http://codepen.io/nagasai/pen/qNpzzx

Answer 3

您需要在select选项中添加值，然后在jquery代码中使用val（）。

     <body>
    <label for="country">Country : </label>
    <select id="country">
      <option>Please select</option>
      <option value="Revenue" name="CountryRevenue">Revenue</option>
      <option value="Quantity" name="CountryQuantity">Quantity</option>
      <option value="GrossMargin" name="CountryGrossMargin">Gross Margin</option>
    </select>
    <div id="results"></div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $("#country").on("change", function() {
 var val = $(this).val();
        $("#results").html("<div id='" + val + "' style='min-width: 400px; height: 400px; margin: 0 auto' ></div>");
      })
    </script>

下拉选择显示来自不同<div>的结果

3 个答案: