Question

我有以下html

<div class="field">
    <label for="approval_approvers_attributes_0_approver_type">Approver</label>
    <select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="$.fn.myFunc(this);">
        <option selected="selected" value="Role">Role</option>
        <option value="Specific User">Specific User</option>
    </select>
    </br>
    </br>
</div>
<div class="field" class="role">
    <label for="approval_approvers_attributes_0_approver_value">Role</label>
    <select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
        <option value="hr manager">hr manager</option>
        <option selected="selected" value="reporting manager">reporting manager</option>
    </select>
    <input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a> 
    </br>
    </br>
</div>

和followng js函数定义：

$.fn.myFunc = function (button) {    
    var id = $(button).attr('id');
    id = button.id;    
    $(button).next().label.text("specific user");
}

在第一个div中调用上面的Jquery函数。更改第一个div中的下拉列表时调用此函数。在此功能中，当用户选择"specific user"时，我希望标签文本更改为第二个div中的"specific user"。因此我想将第二个div中存在的下拉列表更改为文本框，以输入特定的用户名。我怎样才能做到这一点？

Answer 1

您需要更改代码，

<div class="field" class="role">
    <label for="approval_approvers_attributes_0_approver_value">Role</label>
    <select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
        <option value="hr manager">hr manager</option>
        <option selected="selected" value="reporting manager">reporting manager</option>
    </select>
    <input type="text" class="inpt_specific_user" style="display:none"/>
    <input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a> 
    </br>
    </br>
</div>

<script>
    $.fn.myFunc = function (button) {    
        var id = $(button).attr('id');
        id = button.id;    
        var $nextDiv = $(button).closest('div.field') // get closest parent field
                                .next('div.field') // get next parent field
         $nextDiv.find('label') // find label
                 .text(button.value); //change text, this.value so that it will be dynamic for both the values    
         $nextDiv.find('select.appr_type,input.inpt_specific_user')
                 .toggle(); // toggle select/input =>hide/show

    }
</script>

＆＃13;

$.fn.myFunc = function(button) {
  var id = $(button).attr('id');
  id = button.id;
  var $nextDiv = $(button).closest('div.field') // get closest parent field
    .next('div.field') // get next parent field
  $nextDiv.find('label') // find label
    .text(button.value); //change text, this.value so that it will be dynamic for both the values    
  $nextDiv.find('select.appr_type,input.inpt_specific_user')
    .toggle(); // toggle select/input =>hide/show

}
$('#approval_approvers_attributes_0_approver_type').on('change', function() {

  $.fn.myFunc(this);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
  <label for="approval_approvers_attributes_0_approver_type">Approver</label>
  <select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="">
    <option selected="selected" value="Role">Role</option>
    <option value="Specific User">Specific User</option>
  </select>
  </br>
  </br>
</div>
<div class="field" class="role">
  <label for="approval_approvers_attributes_0_approver_value">Role</label>
  <select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
    <option value="hr manager">hr manager</option>
    <option selected="selected" value="reporting manager">reporting manager</option>
  </select>
  <input type="text" class="inpt_specific_user" style="display:none" />
  <input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a> 
  </br>
  </br>
</div>

＆＃13;

更新了代码，不使用额外元素并使用replaceWith()

＆＃13;

$.fn.myFunc = function(button) {
  var id = $(button).attr('id');
  id = button.id;
  var $nextDiv = $(button).closest('div.field') // get closest parent field
    .next('div.field') // get next parent field
  $nextDiv.find('label') // find label
    .text(button.value); //change text, this.value so that it will be dynamic for both the values
  var $el = null;
  if (button.value != 'Role') {
    $nextDiv.find('select.appr_type').replaceWith('<input type="text" class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]"  />');
  } else {
    $nextDiv.find('input.appr_type').replaceWith('<select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">\
        <option value="hr manager">hr manager</option>\
        <option selected="selected" value="reporting manager">reporting manager</option>\
    </select>');
  }
}
$('#approval_approvers_attributes_0_approver_type').on('change', function() {
  $.fn.myFunc(this);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
  <label for="approval_approvers_attributes_0_approver_type">Approver</label>
  <select class="form-control appr_type" id="approval_approvers_attributes_0_approver_type" name="approval[approvers_attributes][0][approver_type]" onchange="">
    <option selected="selected" value="Role">Role</option>
    <option value="Specific User">Specific User</option>
  </select>
  </br>
  </br>
</div>
<div class="field" class="role">
  <label for="approval_approvers_attributes_0_approver_value">Role</label>
  <select class="form-control appr_type" id="approval_approvers_attributes_0_approver_value" name="approval[approvers_attributes][0][approver_value]">
    <option value="hr manager">hr manager</option>
    <option selected="selected" value="reporting manager">reporting manager</option>
  </select>

  <input id="approval_approvers_attributes_0__destroy" name="approval[approvers_attributes][0][_destroy]" type="hidden" value="false" /><a class=" remove_nested_fields" data-association="approvers" href="javascript:void(0)">Remove</a> 
  </br>
  </br>
</div>

＆＃13;

如何更改div中的标签文本？以及如何更改文本框的下拉列表？

1 个答案: