javascript - onchange里面的onchange jquery

Question

我在 onchange 事件中有代码 onchange 时遇到问题。

因此，一些有效，一些无效。

<script>
    $(document).on('change', '.sellkop', function() { // this is radio button
        if ($("#rs").is(':checked')) {
                 $("#text_container").after(price_option());
            };
        if ($("#rk").is(':checked')) {
               $("#price_container").remove();
               $("#licensenumber_c").css({"display": 'none'
           });
         };
    });

 $('#category_group').on('change', function() { // this is select options

    if ($(this).val() == 101) {
              $("#underKategory").css({"display": 'none'});
              $("#modelcontainer").remove();
              $(".toolimage").css({ "display": 'block'});

        $('.sellkop').on('change', function() { // this is radio button
            if ($("#rs").is(':checked')) {
                $("#licensenumber_c").css({"display": 'block'});
                $(".toolimage").css({"display": 'block' });
            } else {
                $(".toolimage").css({"display": 'none'});
            }
        });
    } else {
               $(".bilar").remove();
              $(".toolimage").css({ "display": 'none'});
    }
    if ($(this).val() == 102) {
                $(".houses_container").remove();
                $(".toolimage").css({"display": 'none'});
                $("#underKategory").css({"display": 'inline-block'});
                $("#modelcontainer").remove();
    }

    ///............many other values continue
 });
</script>

我知道有更好的方法来管理和简化此代码，我该怎么做？

编辑:

我想要的是:如果我选择一个选项，然后获取该选项的值，然后在该类别选项下有单选按钮，然后每个复选按钮我需要显示或删除一些数据

这是一个fiddle当我选择买入或卖出时从类别跳转看起来是我的问题，所以如果我选择类别-->勾选购买-->然后选择其他。我没有得到与直接选择汽车相同的结果 ---> 购买

Answer 1

我以前从来没有使用过两个答案(更不用说三个)，但是基于所有的评论，为了让事情变得简单，另一个解决方案是根据选择数据驱动其他项目的可见性，使用data- 属性，用于存储选项和单选按钮上的选择器。

JSFiddle: http://jsfiddle.net/TrueBlueAussie/4s5rwce2/28/

例如，选择的 HTML 变为

<select name="category_group" id="category_group">
    <option value="0">choose category</option>
    <option value='101' id='cat101' data-show="#sellbuy,.cars,.toolimage,#licenscontainer">cars</option>
    <option value='102' id='cat102' data-show="#sellbuy,#underKategory">others</option>
</select>

和这样的单选按钮:

 <input id='rs' type='radio' class='radio sellkop' value='s' name='type' checked='checked' data-show="#price_container,.cars,.toolimage"/>

代码变得非常简单，只需应用选定项目中指定的过滤器即可。

$(document).on('change', '.sellkop', function () { // this is radio button
    // Hide defaults
    $("#price_container,.cars,.toolimage").hide();

    // Show the items desired by the selected radio button
    $($(this).data("show")).show();
});

$('#category_group').on('change', function () { // this is select options
    // Get the various possible data options and decide what to show/hide based on those
    var $this = $(this);
    var value = $this.val();

    // Get the selected option
    var $li = $('option[value='+ value+']', $this);

    // Hide all the defaults first
    $('#licenscontainer,.cars,.toolimage,.sell,#underKategory').hide();

    // Now show any desired elements
    $($li.data('show')).show();

    // Fire change event on the radio buttons to ensure they change
    $('.sellkop:checked').trigger('change');
});

这是一个非常通用的解决方案，允许非常复杂的表单根据需要打开/关闭其他元素。您可以添加数据隐藏属性，并根据需要对这些属性执行类似的操作。