0

感谢stackflow专家，我有一个为一个客户工作的变体，但对于另一个客户，我需要类似但不同的东西。由于代码稍后会发生的事情，我需要使用“If 语句”，但我不能这样做：

我只希望下面的代码>>，如果收音机选择的值=“房子”，运行这个代码，看看“房子”是否是下拉列表中值的一部分，如果是，只显示那些值下拉菜单。与船、公寓等相同。

我在这里做错了什么？

任何帮助，非常感谢。

jsFiddle在这里： http://jsfiddle.net/justmelat/kkk7J /

html在这里：

<form method="post">
    <fieldset id="Group1" name="Group1">
    <legend>Group box</legend>
    <input id="Radio1" name="Radio1" type="radio" value="House" />House<br />
    <input id="Radio1" name="Radio1" type="radio" value="Condo" />Condo<br />
<input id="Radio1" name="Radio1" type="radio" value="Boat" />Boat<br />
    </fieldset><br/><br/>

    <fieldset id="Group2" name="Group2">
    <legend>Group Options</legend>
    <select id="Select1" name="Select1">
    <option value="HO-House 1">House 1</option>
    <option value="HO-House 2">House 2</option>
    <option value="HO-House 3">House 3</option>
    <option value="CO-Condo 1">Condo 1</option>
    <option value="CO-Condo 2">Condo 2</option>
    <option value="CO-Condo 3">Condo 3</option>
    <option value="BO-Boat 1">Boat 1</option>
    <option value="BO-Boat 2">Boat 2</option>
    <option value="BO-Boat 3">Boat 3</option>

    </select></fieldset></form>

这里的javasript：

function whichTypeChange()
    {
//other stuff going on here
var $typeVal = $("input[name=Radio1]:checked").val();
var oldoptions = "";
var oldoptions = [];

if($typeVal ==  "House")
           {

                $("#Select1").append(oldoptions);
                oldoptions = $("#Select1 option:not(:contains(" + ($typeVal) + "))").detach();
           }
if($typeVal ==  "Condo")
           {
                $("#Select1").append(oldoptions);
                oldoptions = $("#Select1 option:not(:contains(" + ($typeVal) + "))").detach();
           }
if($typeVal ==  "Boat")
           {
                $("#Select1").append(oldoptions);
                oldoptions = $("#Select1 option:not(:contains(" + ($typeVal) + "))").detach();
           }

//other stuff going on here
   }​

======================================= 好吧，我正在把自己挖到一个更深的洞里。我现在正在开发实际的应用程序。代码如下：

正如其他人提到的那样，我主要需要使用分离功能来使这项工作在 IE 中工作，但下拉列表中的值没有按应有的方式显示/不显示 - 任何人都可以看到我的错误吗？先感谢您。

 typeVal = $("input[name=6535]:checked").val(); //radio buttons
    var jobTypeFld_DD = "";
    jobTypeFld_DD = $('#3547'); //dropdown field
    var optionInDD = []; //array to hopd dropdown options
    optionInDD = jobTypeFld_DD.find('option'); //use this for something else
    optionInDD2 = jobTypeFld_DD.find('option'); // cache all options on page load  
    var visibleItems = "";

if (typeVal == "Art")
         {
         $('fieldset#section-417').show();
         thisval = 'Art -';
         visibleItems = optionInDD2.filter('option[value*=' + thisval + ']'); // options to show
     optionInDD2.not(visibleItems).detach(); // remove all options
         optionInDD2.append(visibleItems); // add options to show
         }
4

3 回答 3

1

您可以根据您的无线电输入删除/附加您的选项

$(function() {
    var $options = $('option'); // cache all options on page load
    $('input[type=radio]').change(function() {
        var options = $options.filter('option[value*=' + $(this).val() + ']'); // options to show
        $('option').detach(); // remove all options
        $('#Select1').append(options); // add options to show
    });
});​

http://jsfiddle.net/fesV3/

于 2012-12-11T15:38:30.843 回答
0

你可以使用这样的东西：

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<form method="post">
    <fieldset id="Group1" name="Group1">
    <legend>Group box</legend>
    <input id="Radio1" name="Radio1" type="radio" value="House" />House<br />
    <input id="Radio1" name="Radio1" type="radio" value="Condo" />Condo<br />
<input id="Radio1" name="Radio1" type="radio" value="Boat" />Boat<br />
    </fieldset><br/><br/>

    <fieldset id="Group2" name="Group2">
    <legend>Group Options</legend>
    <select id="Select1" name="Select1">
    <option value="">House 1</option>
    <option value="HO-House 2"></option>
    <option value="HO-House 3">House 3</option>
    <option value="CO-Condo 1">Condo 1</option>
    <option value="CO-Condo 2">Condo 2</option>
    <option value="CO-Condo 3">Condo 3</option>
    <option value="BO-Boat 1">Boat 1</option>
    <option value="BO-Boat 2">Boat 2</option>
    <option value="BO-Boat 3">Boat 3</option>

    </select></fieldset></form>
<script>
var myHouseOptions= {
    'HO-House 1' : 'House 1',
    'HO-House 2' : 'House 2',
    'HO-House 3' : 'House 3'
};
var mycondoOptions= {
    'HO-condo1' : 'condo 1',
    'HO-condo 2' : 'condo 2',
    'HO-condo 3' : 'condo 3'
};
var myBoatOptions= {
    'HO-Boat 1' : 'Boat 1',
    'HO-Boat 2' : 'Boat 2',
    'HO-Boat 3' : 'Boat 3'
};
$(function(){
    var ddl = $("#Select1");
    $("input[type='radio']").change(function(){
        switch($(this).val())
        {
        case "House":
        ddl.empty();
        $.each(myHouseOptions, function(val, text) {
        ddl.append( new Option(text,val) );
        });
        break;
        case "Condo":
        ddl.empty();
        $.each(mycondoOptions, function(val, text) {
        ddl.append( new Option(text,val) );
        });

        break;
        case "Boat":
        ddl.empty();
        $.each(myBoatOptions, function(val, text) {
        ddl.append( new Option(text,val) );
        });
        break;
        }
    });
});
</script>


</body>
</html>
于 2012-12-11T15:19:40.583 回答
0

清理标记并删除重复的 ID 等，并执行以下操作来隐藏/显示选项：

$('[name="Radio1"]').on('change', function() {
    var self=this, sel=true;
    $('#Select1').find('option').each(function(i,elm) {
        var ex = elm.value.indexOf(self.value)!=-1;
        elm.style.display = ex ? 'block':'none';
        if (sel&&ex) {
            elm.selected = true;
            sel=false;
        }
    });
});

小提琴

于 2012-12-11T15:24:07.203 回答