Question

我试图解决这个问题几个小时。我的代码

 <div class="conditions_wrapper">   
    <div class="ui grid condition"> <!-- first -->
      <div class="four wide column">
       <select class="select_column"><option> .... </options></select>
      </div>

      <div class="four wide column">
        <select class="select_relation"><option> .... </options></select>
      </div>

      <div class="six wide column">
         <input class="condition_value" type="text">
      </div>

    </div>

    <div class="ui grid condition"> <!-- second -->
      <div class="four wide column">
       <select class="select_column"><option> .... </options></select>
      </div>

      <div class="four wide column">
        <select class="select_relation"><option> .... </options></select>
      </div>

      <div class="six wide column">
         <input class="condition_value" type="text">
      </div>

    </div>    
      .
      .
      more clone of outer div . . .
 </div>

我想要的是，当我首先选择[class=select_column]时，它应该更新第二个选择[class=select_relation]和最后一个输入字段的占位符。

jQuery('#conditions_wrapper').on('change','.select_column', function (e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value;

if(valueSelected == "value_of_first_select"){    
  jQuery(this).closest(".column").next().first() > $(".select_relation").html('<option> . . . </option>');

  jQuery(this).closest(".column").next().first() > $(".condition_value").prop("placeholder","enter email");

} 

else {

jQuery(this).closest(".column").next().first() > $(".select_relation").html('<option> . . .</option>');

 jQuery(this).closest(".column").next().first() > $(".condition_value").prop("placeholder","enter name");
      }

});

代码工作正常，如果我只有一个条件，但有多个条件，第一个选择中的更改会影响所有第二个选择和所有输入。

我怎样才能仅定位下一个选择和下一个输入？

Answer 1

首先我注意到的是，在您的html代码中，您有/* User Model */ public function userRole() { return $this->belongsTo('App\UserRole', 'user_role_id', 'id'); }，而在您的jQuery上，您选择的是ID <div class="conditions_wrapper">。

这是我想出的。你可能想要重构这个，但它完成了工作。

＆＃13;

jQuery('#conditions_wrapper')

＆＃13;

$('.conditions_wrapper .column').on('change','.select_column', function (e) {
  var optionSelected = $("option:selected", this);
  var valueSelected = this.value;


  // The this keyword here is selecting the "select" input
  // We can then select the parent which is the .comlumn
  // Get the next element which is the .column right after
  // And then get the child element which in this case it is the .select_relation
  $(this).parent().next().children().addClass('red');

	// The this keyword here is selecting the "select" input
  // We can then select the parent which is the .comlumn
  // Get the next element twice which is the second .column element from the select item
  // And then get the child element which in this case it is the .condition_value
  $(this).parent().next().next().children().prop("placeholder","enter email").addClass('red');

});

＆＃13;

select, input {
  margin: 5px 0;
}

.red {
  border-color: red;
}

＆＃13;

jQuery - 选择下一个输入/通过更改选择值来选择

1 个答案: