0

我的代码是：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();
  });

});

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

4

2 回答 2

0 
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>
于 2013-09-03T08:03:27.227 回答
0

请确保每页仅使用一次 ID。ID 是某个元素的唯一标识符。我猜“select”或“dropdown”并不是真正独特的页面元素，因此请考虑更好的名称，例如“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/

于 2013-09-03T07:51:15.597 回答