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

radio button selects list box change and pass null value to each list box

本文关键字：列表 值传 NULL 选择 单选按钮      更新时间：2023-09-26

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

它的 JavaScript 代码：

<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>

我希望这是你所期望的。

参见[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');
    }

试试这个：

<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/

相关文章：