如何更改 div 内的标签文本？以及如何将下拉菜单更改为文本框？

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>

以及下面的js函数定义：

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

对上述 Jquery 函数的调用是在第一个 div 中进行的。当第一个 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>

$.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);
});

<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>

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

$.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);
});

<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>