javascript - 根据选定的单选按钮添加/删除下拉选项

Question

我已经尝试了一段时间，在这里和其他网站上到处搜索。

我在这里找到了某种解决方案 http://jsfiddle.net/zszqs/

但是当我在我的代码上、在我的实际页面上尝试它时，它就是不起作用。如果我将所有代码更改为我的代码，则在示例网站中会出现这种情况。

<input name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
<input name="documenttype" type="radio" required id="dType2" value="Invoice">Invoice

<select name="paymentmethod" required id="paymentmethod">
<option value="" default selected>Select...</option>
<option value="TT">Online Bank Transfer</option>
<option value="PP">PayPal</option>
<option value="CC">Credit Card</option>
</select>

基本上，我想在选择 radio Pro-Forma 选项时删除信用卡选项，或者如果用户将 radio 更改为发票，则再次将其恢复...

<script>
var option = '<option value="CC">Credit Card</option>';
$('input[name=documenttype]').change(function() {
    var $select = $("#paymentmethod");
    if (this.id == 'dType1') {
        $select.find("option[value='CC']").remove()
    } else if (!$select.find("option[value='CC']").length) {
        $select.append(option)
    }
})
</script>

我觉得我没有在页面加载时对代码收费，或者类似的事情。 我对 jquery 完全陌生，所以我可能错过了，我不知道在哪里放置 <script> (头部还是 body ？)或者我是否必须指定一些 onLoad 选项。

Answer 1

使用 jquery 编写脚本代码

$(document).ready(function ()
            {
                $(".documenttype").click(function ()
                {
                        $("option[value='CC']").css("display", $('#dType1').is(":checked") ? "none" : "block");

                });

});

HTML 代码

<input class="documenttype" name="documenttype" type="radio" required id="dType1" value="Pro-Forma">Pro-Forma
            <input class="documenttype" name="documenttype"  type="radio" required id="dType2" value="Invoice">Invoice**
            <select name="paymentmethod" required id="paymentmethod">
                <option value="" default selected>Select...</option>
                <option value="TT">Online Bank Transfer</option>
                <option value="PP">PayPal</option>
                <option value="CC">Credit Card</option>
            </select>