与 Select 的 on change 事件相关的动态更改文本框值不起作用

Question

我一直认为脑子里有 javascript 的人是真正的巫师哈哈，我对此很不满意，我发现自己在工作中自动化了一些视图领域，我不知道如何继续，我有一个方法的回收代码，它从另一个选择中执行选择中的更改。我想重用它，但现在我希望它同意我的 Select 组合中的值，以便能够更改我旁边的文本字段的占位符，并更改指示此选择说明的标签，我的代码是我所知道的它发生了，如果有人可以帮助我使它工作，我将非常感激！谢谢！

我的代码是这样的：

$(function() {
  $("#Input_cond2_operator").change(function() {
    $.get("GetOperatorObject", {
      ID: $("#Input_cond2_operator").val()
    }, function(data) {
      $("#Input_cond2_operator").empty();
      $("#Input_cond2_operator").prop('disabled', false);
      console.log(data);
      if (data && data == "") {
        $("#Input_cond2_operator").append("<option value='ignore'>No information</option>")
        $("#Input_cond2_operator").prop('disabled', true);
      }
      $.each(data, function(index, row) {
        document.getElementById("Input_cond2_value").placeholder = row.subqry_suggested_value;
        document.getElementById("Input_cond2_description").value = row.subqry_supported_operator_description;
      });
    })
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
  <div class="ibox ">
    <div class="ibox-title">
      <h5>Operator Condition 2</h5>
    </div>
    <div class="ibox-content">
      <div class="col-lg-12 col-md-4 col-sm-4 col-xs-4">
        <div class="styled-select">
          <select class="form-control" asp-for="Input_cond2_operator" id="Input_cond2_operator" asp-items="ViewBag.Condition2"></select>
          <label id="Input_cond2_description" class="control-label col-lg-3 col-md-3 col-sm-3 col-xs-12"></label>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="col-lg-4">
  <div class="ibox ">
    <div class="ibox-title">
      <h5>Values</h5>
    </div>
    <div class="ibox-content">
      <input type="text" asp-for="Input_cond2_value" placeholder="" id="Input_cond2_value" class="form-control" />
    </div>
  </div>
</div>

我需要的是根据在：“Input_cond2_operator”中选择的值能够带上它各自的PlaceHolder（“Input_cond2_value”）和它的标签值（“Input_cond2_description”）

我从名为GetOperatorObject的控制器方法中过滤这两个字段，其中我返回一个Json，其中包含占位符和标签的值。

我的控制器方法为了带来我需要的这两个值：

    public async Task<JsonResult> GetOperatorObject(int ID)
    {
        var _brTypeMetadata = await _lkBusinessRulesTypeApplication.GetBusinessRulesTypeMetadataApplication();
        List<Lk_business_rules_type_metadata> _brTypeMetadataResult = new List<Lk_business_rules_type_metadata>();
        foreach (var item in _brTypeMetadata)
        {
            if (item.Rule_type_metadata_id == ID)
                _brTypeMetadataResult.Add(item);
        }
        return Json(_brTypeMetadata);
    }

Json 中返回的实体：

    [Display(Name = "Supported operator")]
    public string Subqry_supported_operator { get; set; }

    [Display(Name = "Supported operator description")]
    public string Subqry_supported_operator_description { get; set; }

    [Display(Name = "Value field - is active flag")]
    public bool? Is_subqry_value_active { get; set; }

    [Display(Name = "Supported value type")]
    public string Subqry_supported_value { get; set; }

    [Display(Name = "Value")]
    public string Subqry_suggested_value { get; set; }

Answer 1

我不能在这里使用 AJAX，所以我替换了一个静态对象数组。

找到与选择值对应的数据元素，并使用它来更新输入元素的属性。

const data = {
  1: { value: "Value 1", placeholder: "Placeholder 1"},
  2: { value: "Value 2", placeholder: "Placeholder 2"}
};

$("#select").change(function() {
  let settings = data[$(this).val()];
  if (settings) {
    $("#input").val(settings.value).prop("placeholder", settings.placeholder);
  } else {
    $("#input").val("").placeholder("");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
<option value="">Choose</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

<input type="text" id="input">