Question

所以这个问题实际上是几年前与前一个问题Update drop down selection with radio button selection using jquery相关的更新。我遇到过类似的情况，我需要产生单选按钮来替换下拉列表，但我无法修改html / jquery / ajax。

使用上述方法，我已经能够完成这项非常棒的工作。但是，我一直在努力解决一个问题。单击第一个单选按钮时，第二个组加载但只加载第一个单选按钮（在这种情况下表示＆＃34;选择选项; n＆＃34;），但是当第一个单元中的相同单选按钮再次单击时，所有选项都会出现他们应该这样做。我无法弄清楚为什么函数在第二次点击时会正确触发，而不是第一次点击。这是参考网站http://www.amymatto.com/product177.html，这是我更新的单选按钮代码。

<script type='text/javascript'>
$(function(){
$("#menu_1 select option").each(function(i,e) {
$("<input type='radio' name='sizeopt'/>")
    .attr("value", $(this).val())
    .attr("checked", i === 1)
    .click(function() {
        $("#menu_1 select").val($(this).val()).trigger('change');
                $("#coloropt").empty();
}).appendTo("#sizeopt");
$("#menu_1 select").change(function(){
    $("input[name='sizeopt'][value='"+this.value+"']").attr("checked","checked");
    $("#menu_2 select option").delay(800).queue(function(i,e) {
    $("<input type='radio' name='coloropt'/>")
         .attr("value", $(this).val())
         .attr("checked", i === 0)
         .click(function() {
             $("#menu_2 select").val($(this).val()).trigger('change');
    }).appendTo("#coloropt");
    $("#menu_2 select option").dequeue();
});
});
});
});
$("#menu_1 select").change(function(){
    $("input[name='sizeopt'][value='"+this.value+"']").attr("checked","checked");
});
</script>

我对使用jquery相当新，所以请原谅我们中的任何错误。我可能完全关闭但我的假设是，如果我在点击时清空包含coloropt输入的div并设置延迟以产生颜色选择输入，它将清除所有内容并给予更改功能时间来处理ajax请求。我正在使用

.trigger('change')

从下拉菜单启动onchange，所有似乎都在工作......但需要两次点击？我很难过，有人对此有任何想法，或者在我的代码中捕捉到可能导致它第一次错过的内容吗？

谢谢你们！

使用单选按钮控制下拉菜单而不修改html

0 个答案: