Question

我一直在想，并且找不到解决方案为什么操作$（“＃locationid3”）。更改（第85行）不起作用，即使它是相同的 $（“＃locationid”）。更改和$（“＃locationid2”）。更改（上面的行）。主要区别是： - #locationid和#positionid2直接放在html表单中，始终可见 - ＃locationid3被放置在html表单之外的隐藏div中，只有在选择了product-dropdown中的“prod2”时才会显示

在表单外部创建隐藏div的原因是，可以通过更改产品下拉列表来重新加载表单中的字段集。通过更改产品，将使用方法“hideFieldsets（）”隐藏所有字段集，并使用方法“showFieldset（）”显示相应的字段集（使用account，product，data-id和data-position）。

我已将代码放在jsfiddle

中

$(document).ready(function(){
      $("#accountid").change(function() {
            var $dropdown = $(this);
            var accounts = {
               "id_1":{"products":[{"id":"1","val":"prod1"},{"id":"2","val":"prod2"}],"locations":[{"id":"4","val":"loc1"},{"id":"1","val":"loc2"}],}

               };


            var key = $dropdown.val();
            var products = {};
            var locations = {};
            var locations2 = {};
            var locations3 = {};
            switch(key) {
                case 'id_1' :products = accounts.id_1.products;locations = accounts.id_1.locations;locations2 = locations;locations3 = locations;break;


            }


            var $productid = $("#productid");
            $productid.empty();
            $.each(products, function(index, value) {
            var option = $('<option></option>').val(value.id).text(value.val);
            $productid.append(option);

            });

            $('#productid').val();
            $productid.trigger("change");

            var $locationid = $("#locationid");
            $locationid.empty();
            $.each(locations, function(index, value) {
            var option = $('<option></option>').val(value.id).text(value.val);
            $locationid.append(option);

            });


            var $locationid2 = $("#locationid2");
            $locationid2.empty();
            $.each(locations2, function(index, value) {
            var option = $('<option></option>').val(value.id).text(value.val);
            $locationid2.append(option);

            });


            var $locationid3 = $("#locationid3");
            $locationid3.empty();
            $.each(locations3, function(index, value) {
            var option = $('<option></option>').val(value.id).text(value.val);
            $locationid3.append(option);

            });


        });



    $("#productid").change(function() {
        var possibleFieldsets = {

        "id_1_1" : ["id_1_1__ test ","id_1_1__ test2 "],
        "id_1_2" : ["id_1_2__ test ","id_1_2__ test2 "],
        };

        hideFieldsets();
        var selectedAccProd = $("#accountid option:selected").val()+"_"+$("#productid option:selected").val();
        showFieldsets(possibleFieldsets[selectedAccProd]);

    });

        $("#locationid").change(function() {
            readLocationData(this.value);
        });

        $("#locationid2").change(function() {
            readLocationData(this.value);
        });

        $("#locationid3").change(function() {
            readLocationData(this.value);
        });

        var allFieldset = {};
        $('#allFieldsets').children().each(function(index,fieldsetElement){
            var $fieldsetElement = $(fieldsetElement);
            allFieldset[$fieldsetElement.attr("data-id")] = $fieldsetElement;
        });
        $('#allFieldsets').remove();


        function hideFieldsets(){

            for(var key in allFieldset){
                var $div = $('fieldset[data-id="'+key+'"]').parent();
                if($div.children().length > 0){
                    allFieldset[key] = $div.children();
                    $div.empty();
                }
                $div.hide();
            }
        }

        function showFieldsets(fieldsetArray){
            $.each(fieldsetArray, function(index, element){
                var $div = $('div[data-position="'+element.split('__')[1]+'"]');
                $div.append(allFieldset[element]);
                $div.show();

            });

        } 
         function readOrderData(orderId){
            window.alert("reading data");
        }



        function readLocationData(locationId){
            window.alert("location changed");
        }

        $("#accountid").trigger("change");
      });

      $isUnread = false;

我真的很感激有关如何使#locationid3 change（）有效的任何主管/建议。感谢名单！

Answer 1

由于您的#locationid3动态更改，因此正常选择无法正常工作。您需要使用以下格式：

$("#parent-element").on("change", "#find-this-element", function(){})

#parent-element必须是静态的，因此如果您只有静态body，则可以执行$("body").on("change", "#find-this-element", function(){})。但是，您应该使用最接近的静态元素来提高性能。

Answer 2

您不只是在＃location3选择框中进行显示/隐藏。您正在从页面中删除html并在选择prod2时再次附加它。你需要使用jQuery的.on方法。因为它会在dom创建后用html加载事件绑定。

$('body').on('change','#locationid3',function(){
   readLocationData(this.value);
});

查看此演示：Demo

Answer 3

您应该将change事件委托给父元素。这是必需的，因为当事件绑定在document.ready时，下拉列表3将隐藏在DOM中，并且仅在稍后显示。

$(document).ready(function() {
  $("#accountid").change(function() {
    var $dropdown = $(this);
    var accounts = {
      "id_1": {
        "products": [{
          "id": "1",
          "val": "prod1"
        }, {
          "id": "2",
          "val": "prod2"
        }],
        "locations": [{
          "id": "4",
          "val": "loc1"
        }, {
          "id": "1",
          "val": "loc2"
        }],
      }

    };


    var key = $dropdown.val();
    var products = {};
    var locations = {};
    var locations2 = {};
    var locations3 = {};
    switch (key) {
      case 'id_1':
        products = accounts.id_1.products;
        locations = accounts.id_1.locations;
        locations2 = locations;
        locations3 = locations;
        break;


    }


    var $productid = $("#productid");
    $productid.empty();
    $.each(products, function(index, value) {
      var option = $('<option></option>').val(value.id).text(value.val);
      $productid.append(option);

    });

    $('#productid').val();
    $productid.trigger("change");

    var $locationid = $("#locationid");
    $locationid.empty();
    $.each(locations, function(index, value) {
      var option = $('<option></option>').val(value.id).text(value.val);
      $locationid.append(option);

    });


    var $locationid2 = $("#locationid2");
    $locationid2.empty();
    $.each(locations2, function(index, value) {
      var option = $('<option></option>').val(value.id).text(value.val);
      $locationid2.append(option);

    });


    var $locationid3 = $("#locationid3");
    $locationid3.empty();
    $.each(locations3, function(index, value) {
      var option = $('<option></option>').val(value.id).text(value.val);
      $locationid3.append(option);

    });


  });



  $("#productid").change(function() {
    var possibleFieldsets = {

      "id_1_1": ["id_1_1__ test ", "id_1_1__ test2 "],
      "id_1_2": ["id_1_2__ test ", "id_1_2__ test2 "],
    };

    hideFieldsets();
    var selectedAccProd = $("#accountid option:selected").val() + "_" + $("#productid option:selected").val();
    showFieldsets(possibleFieldsets[selectedAccProd]);

  });

  $("#locationid").change(function() {

    readLocationData(this.value);
  });

  $("#locationid2").change(function() {

    readLocationData(this.value);
  });

  $(document).on("change", "#locationid3", function() {
    console.log("here");
    readLocationData(this.value);
  });

  var allFieldset = {};
  $('#allFieldsets').children().each(function(index, fieldsetElement) {
    var $fieldsetElement = $(fieldsetElement);
    allFieldset[$fieldsetElement.attr("data-id")] = $fieldsetElement;
  });
  $('#allFieldsets').remove();


  function hideFieldsets() {

    for (var key in allFieldset) {
      var $div = $('fieldset[data-id="' + key + '"]').parent();
      if ($div.children().length > 0) {
        allFieldset[key] = $div.children();
        $div.empty();
      }
      $div.hide();
    }
  }

  function showFieldsets(fieldsetArray) {
    $.each(fieldsetArray, function(index, element) {
      var $div = $('div[data-position="' + element.split('__')[1] + '"]');
      $div.append(allFieldset[element]);
      $div.show();

    });

  }

  function readOrderData(orderId) {
    window.alert("reading data");
  }



  function readLocationData(locationId) {
    window.alert("location changed");
  }

  $("#accountid").trigger("change");
});

$isUnread = false;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="orderForm" method="POST" enctype="multipart/form-data">
  <fieldset data-id="admin">
    <legend>Admin</legend>
    <table>
      <tr>
        <td>
          <label for="accountid">Kunde:</label>
        </td>
        <td>
          <select id="accountid" name="accountid">
            <option value="id_1">acc1</option>
        </td>
        <td></td>
        <td></td>
        <td>
          <label for="productid">Produkt:</label>
        </td>
        <td>
          <select id="productid" name="productid">
            <option value="1">prod1</option>
            <option value="2">prod2</option>
          </select>
        </td>

      </tr>
      <tr>
        <td>
          <label for="locationid">Standort:</label>
        </td>
        <td>
          <select id="locationid" name="locationid">
            <option value="4">loc1</option>
            <option value="1">loc2</option>
          </select>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

      </tr>
      <tr>
        <td>
          <label for="locationid2">Standort2:</label>
        </td>
        <td>
          <select id="locationid2" name="locationid2">
            <option value="4">loc1</option>
            <option value="1">loc2</option>
          </select>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

      </tr>
    </table>
  </fieldset>
  <div data-position=" test "></div>
  <div data-position=" test2 "></div>


  <hr>
</form>
<div style="display:none; width:0px; height:0px; position:absolute; top:-1px; left:-1px" id="allFieldsets">
  <fieldset data-id="id_1_1__ test " data-position=" test ">
    <legend>test</legend>
    <div>
      <table>
        <tr>
          <td>
            <label for="registrationnumber">test111</label>
          </td>

        </tr>

      </table>
    </div>
  </fieldset>
  <fieldset data-id="id_1_1__ test2 " data-position=" test2 ">
    <legend>test2</legend>
    <div>
      <table>
        <tr>
          <td>
            <label for="appointmentdate">test112</label>
          </td>

        </tr>

      </table>
    </div>
  </fieldset>
  <fieldset data-id="id_1_2__ test " data-position=" test ">
    <legend>test</legend>
    <div>
      <table>
        <tr>
          <td>
            <label for="registrationnumber">test121</label>
          </td>

        </tr>

      </table>
    </div>
  </fieldset>
  <fieldset data-id="id_1_2__ test2 " data-position=" test2 ">
    <legend>test2</legend>
    <div>
      <table>
        <tr>
          <td>
            <label for="appointmentdate">test122</label>
          </td>

        </tr>
        <tr>
          <td>
            <label for="locationid3">Standort3:</label>
          </td>
          <td>
            <select id="locationid3" name="locationid3">
              <option value="4">loc1</option>
              <option value="1">loc2</option>
            </select>
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>

        </tr>
      </table>
    </div>
  </fieldset>

</div>

jquery change（）在隐藏div

3 个答案: