Question

我的代码是： HTML：

  <select id="select" onclick="getValue()">
         <option id="profile-pic">profile pic</option>
         <option id="product-image">product image</option>
    </select>
    <div id="radio-button">
      <label class="radio">
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      male
      </label>
   <label class="radio">
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      female
   </label>
 </div>
 <div id="dropdown">
   <select id="select">
     <option>profile pic</option>
     <option>product image</option>
   </select>
   <select id="select">
     <option>profile pic</option>
     <option>product image</option>
   </select>
</div>

jquery的：

 $(document).ready(function(){

        $("div#dropdown").hide();
         $("div#radio-button").hide();

    });




    $(document).ready(function(){
  $("#select").change(function(){

    $("div#dropdown").hide();
     $("div#radio-button").show();
  });
$("#select").click(function(){

    $("div#dropdown").show();
     $("div#radio-button").hide();
  });

});

我想在selectlist中使用id的选项。我在select中有两个选项（1：profile-pic，2：product-image）。我想要的是：当我点击个人资料图片时，它会显示两个单选按钮。如果我选择产品图片，则显示两个下拉列表。

Answer 1

请确保每页仅使用一次ID。 ID是某个元素的UNIQUE标识符。我猜“选择”或“下拉列表”不是真正独特的页面元素，所以想想更好的名称，例如“profile_picture_select”和“product_image_select”。

另外，不要使用内联javascript（onclick =“getValue（）”）。

实施例

HTML

<select id="function_select">
    <option>profile_picture_select</option>
    <option>product_image_select</option>
</select>

<div id="profile_picture_select">profile_picture_select</div>
<div id="product_image_select">product_image_select</div>

JavaScript（jQuery）（使用缩进）

$(function () {                          // Same as $(document).ready().
    $("#profile_picture_select").hide(); // By ID, so no element needed.
    $("#product_image_select").hide();

    // Just one document ready function.

    $("#function_select").change(function () {
        switch ($(this).val()) {
            case "profile_picture_select":
                $("#profile_picture_select").show();
                $("#product_image_select").hide();
                break;
            case "product_image_select":
                $("#profile_picture_select").hide();
                $("#product_image_select").show();
                break;
        }
    });
});

检查jsFiddle：http://jsfiddle.net/c3Ehb/

Answer 2

JQuery

$(document).ready(function(){
    $("#dropdown").hide();
    $("#radio-button").hide();

    $("#select").change(function () {
        if($("#select option:selected").text() == 'profile pic')
        {
            $("#dropdown").hide();
            $("#radio-button").show();
        }
        if($("#select option:selected").text() == 'product image')
        {
            $("#dropdown").show();
            $("#radio-button").hide();
        }
    });
});

HTML

<select id="select">
    <option>profile pic</option>
    <option>product image</option>
</select>
<div id="radio-button">
    <label class="radio">
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
        male
    </label>
   <label class="radio">
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
      female
   </label>
 </div>
 <div id="dropdown">
   <select id="select">
     <option>profile pic</option>
     <option>product image</option>
   </select>
   <select id="select">
     <option>profile pic</option>
     <option>product image</option>
   </select>
</div>

我怎样才能在selectlist中使用id选项

2 个答案: