单击select';时将数组行回显到文本区域中;s选项


Echo array rows into textareas when clicking on select's option

我正在从数据库中检索一个充满数据的数组。我想建立一个包含所有名称的下拉列表,当单击一个名称时,我想将值回显到表单中的某个文本区域。像这样:

array 
  0 => 
    array 
      'id' 
      'name'
      'desc' 
      'date'
  1 => 
    array 
      'id'
      'name'
      'desc' 
      'date'

这将是我的代码:

<html>
<head>
</head>
<body>
    <form method="post">
       <select>
          <?php some foreach that fills the dropdown ?>
       </select>
    <input type="text" id="nombre" name="name">
    <input type="text" id="dato" name="date">        
    <textarea id="desc" name="desc"><?php echo ...></textarea>

    <input class="cbp-mc-submit" type="submit" value="publish" />
    </form>
       <script src="js/jquery.js"></script>

       <script src="js/bootstrap.min.js"></script>
    </body>
</html>

听起来你可以通过PHP填充下拉列表。以下是获取所选选项的值(或文本)并将其放入文本区域的方法:

$('#selID').change(function(){
  $('#taID').val( this.value );
  //or
  //$('#taID').val( $(this).find(':selected').text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="selID">
  <option value="">Choose One</option>
  <option value="audi">Audi Automobile</option>
  <option value="burger">Deluxe Hamburger</option>
  <option value="bunnie">Peter Rabbit</option>
</select>
<br>
<textarea id="taID" rows="5" cols="20"></textarea>


注:

this指的是触发javascript的元素——在本例中,<select>控件的更改事件触发了js。

在纯javascript中,this.value返回元素的值。但是,如果您需要运行更多的jQuery操作(如.find().text()),则需要返回一个jQuery对象供这些操作操作。在这种情况下,请使用$(this)

由于this.value的键入速度比$(this).val()快,所以当我不需要创建jQuery对象时,我使用了纯js方法。当我只需要获取元素的ID时,我经常使用相同的快捷方式,例如:

var myID = this.id;

您可以将输出传递给json_encode(),并使用下面的代码块接收它。

$("#selectID").on('change', function() {
  var sid = $('select[name=select]').val();
  $.ajax({
    url: "/get/data",
    data: {sid:sid},
    type: "POST",
    dataType : "json",
    success: function(xhr){
      $('#desc').val(xhr);
    });
  }
 });   
});