javascript - 单选按钮选择列表框更改并将空值传递给每个列表框

Question

当单选按钮选择列表框更改并将空值传递给每个列表框时......如空值或空白......

它的java脚本代码::

<div>
    <input type="radio" name="rdo" id="rdo1" value="list1" />Radio1
    <select id="select1" style='display:none;'>
        <option value="l1">1.1</option>
        <option value="l2">2.2</option>
    </select>
</div>
<div>
    <input type="radio" name="rdo" id="rdo2" checked="checked" value="list2"/>Radio2
    <select id="select2">
        <option value="l1">2.1</option>
        <option value="l2">2.2</option>
    </select>
</div>

<script>
function select1() {
    document.getElementById("select1").style.display="block";
    document.getElementById("select2").style.display="none";   
}

function select2() {
 document.getElementById("select2").style.display="block";
document.getElementById("select1").style.display="none";             
}    


document.getElementById("rdo1").onclick = select1;
document.getElementById("rdo2").onclick = select2;
</script>

Answer 1

我希望这是你所期望的。

参见 [jsFiddle][1]

[1]：http: //jsfiddle.net/x2n9W/1/。现在看看我更新的代码

function select1(someValue) {
        document.getElementById("select1").style.display = "block";
        var option = document.createElement("option");
        option.value = "";
        option.text = "";
        document.getElementById("select1").appendChild(option);
        document.getElementById("select2").style.display = "none";

    }

    function select2(someValue) {
        document.getElementById("select2").style.display = "block";
        document.getElementById("select1").style.display = "none";
        var option = document.createElement("option");
        option.value = "";
        option.text = "";
        document.getElementById("select2").appendChild(option);
    }
    document.getElementById("rdo1").onclick = function () {
        select1('someValue1');
    }
    document.getElementById("rdo2").onclick = function () {
        select2('someValue2');
    }

Answer 2

试试这个：

<div>
   <input type="radio" class="radiobtns" name="rdo" id="rdo1" value="list1" />Radio1
   <select id="select1" class="select_list" style='display:none;'>
      <option value="l1">1.1</option>
      <option value="l2">2.2</option>
   </select>
</div>
<div>
   <input type="radio" class="radiobtns" name="rdo" id="rdo2" checked="checked"   value="list2"/>Radio2
   <select id="select2" class="select_list">
      <option value="l1">2.1</option>
      <option value="l2">2.2</option>
   </select>
</div>

<script>

  $('.radiobtns').click(function(event){  
     var $ele = $(event.currentTarget),
     $select = $ele.siblings('.select_list');
     $('.select_list').hide();
     var empty_exists = $select.find('option').filter(function() {
        return this.value == null || this.value == '';
     });

     if(empty_exists.length == 0){
       $select.append('<option value=""></option>');
       $select.val('');     
     }
     $select.show();         
  }); 

</script>

使用 jquery 和 javascript查看演示http://jsfiddle.net/x2n9W/8/