javascript - 如何从第一个下拉列表的 onchange 填充 2 个文本框和 1 个下拉列表

Question

我试图在文本框中显示星系的坐标，并根据第一个下拉列表的结果填充下拉列表。我可以使用链接的下拉菜单，但无法弄清楚如何填充相关文本框

我找到的答案只能回答一个问题，但不能同时回答两个问题，并且将我找到的答案组合起来也不起作用

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

<div class="form-group"><div class="row"><div class="col"><label for="target-list">Target Name:</label></div></div> <select id="choices" type="select" name="name" placeholder="Target Name" class="button form-control" aria-required="true" aria-invalid="false"></select>
<div class="alert alert-danger" style="display: none;"></div></div> <div class="form-group"><label>Right Ascension:</label> <input id="Right Ascension" type="text" placeholder="HH:MM:SS.S" name="ra" class="form-control" aria-required="true" aria-invalid="false"> <div class="alert alert-danger" style="display: none;"></div></div> <div class="form-group"><label>Declination:</label> <input type="text" placeholder="DD:MM:SS.S" name="dec" class="form-control" aria-required="true" aria-invalid="false"> <div class="alert alert-danger" style="display: none;"></div></div>

 <div><label class="wrapper" for="states">Filter</label>

$(document).ready(function() {
  //init data
  var arrayList = [{
      "Id": 0,
      "Name": "Select a target...",
      "Right Ascension": "HH:MM:SS.S",
      "Declination":"DD:MM:SS.S"
    },
    {
      "Id": 1,
      "Name": "M15",
        "Right Ascension": "21:29:58.3",
      "Declination":"+12:10:01.2"
    },
    {
      "Id": 2,
      "Name": "M27"

    },
    {
      "Id": 3,
      "Name": "NGC891"
    }

  ];


  for (var i = 0; i <= arrayList.length; i++) {
    $('#choices').append('<option value="' + arrayList[i].Id + '">' + arrayList[i].Name + '</option>');
  }


});

$("#choices").change(function() {
  // $.getJSON("jsondata/data.json", function(data) {
  //use this if using external json sets

  var $selection = $("#choices option:selected");
  var key = $selection.val();

  var vals = [];

  $(".imghere").attr("src", "");

  switch (key) {
    case '1':
      text: ["Please Select a Filter","Red (Rp)", "Green (V)", "Blue (B)"],
      vals = ["Please Select a Filter...","Red", "Green", "Blue"]; 
      break;
    case '2':
      vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"] //data.Berkeley 73.split(",");
      break;
    case '3':
      vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"] //data.Czernic 27.split(",");
      break;
    case '0':
      vals = ['Please Select a Filter...'];
  }


  var $secondChoice = $("#filter");
  $secondChoice.empty();
  $.each(vals, function(index, value) {
    $secondChoice.append("<option>" + value + "</option>");
  });

});


$("#filter").change(function() {
  var $filter = $("#filter option:selected").val();
  var baseurl = "https://github.com/brychanjames/RTI-Simulator/blob/master/";
  var $showimg = baseurl + $filter + ".jpg";
  //$(".imghere").attr("src",$showimg); use this, the next line is demo purposes
  $(".imghere").attr("src", $showimg); /*use variable in place of the placeholder image*/


});

我希望能够显示目标的赤经和赤纬，并使用下拉列表填充显示的值，我创建了一个 fiddle ，显示与此处惰性文本框一起使用的选择框

[http://jsfiddle.net/brychang/jtf8k5ym/33/]

Answer 1

我能够做到这一点，但没有从数组中打印名称，这意味着您必须通过更改 jquery 代码中的“test”和“test2”来自行填充值。

更改:

<input id="Right Ascension" type="text" placeholder="HH:MM:SS.S" name="ra" class="form-control" aria-required="true" aria-invalid="false">
<input type="text" placeholder="DD:MM:SS.S" name="dec" class="form-control" aria-required="true" aria-invalid="false">

至

<input id="right" type="text" placeholder="HH:MM:SS.S" name="ra" class="form-control" aria-required="true" aria-invalid="false">
<input id="desc" type="text" placeholder="DD:MM:SS.S" name="dec" class="form-control" aria-required="true" aria-invalid="false">

JQUERY: 将值“test”和“test2”编辑为任意值

  switch (key) {
    case '1':
      text: ["Please Select a Filter","Red (Rp)", "Green (V)", "Blue (B)"],
      vals = ["Please Select a Filter...","Red", "Green", "Blue"]; 
      $('#right').val('test');
      $('#desc').val('test2');
      break;
    case '2':
      vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"] //data.Berkeley 73.split(",");
      $('#right').val('test');
      $('#desc').val('test2');
      break;
    case '3':
      vals = ["Please Select a Filter...","Red (Rp)", "Green (V)", "Blue (B)"] //data.Czernic 27.split(",");
      $('#right').val('test');
      $('#desc').val('test2');
      break;
    case '0':
      vals = ['Please Select a Filter...'];
  }