Question

我从数据库中获取数据数组以创建select元素，但我无法根据我选择的选项让页面回显链接。

输出select框的代码：

$options1 = json_decode($row['options'], true);
echo "<select name='" . $row['name'] . "'>";

foreach($options1 as $key => $location)//foreach loop  
{  
  echo "<option value='" . $location['org'] . "' selected='selected'>" . $location['org'] . "</option><br />";
}

echo "</select>";

一旦选择了一个选项（未提交），我希望它回显$location['address'];。

使用json_decode之前的数组格式是;

[ {"org":"Org Name","address":"Address of org"}, {"org":"Org Name","address":"Address of org"},  {"org":"Org Name","address":"Address of org"}, {"org":"Org Name","address":"Address of org"}, {"org":"Org Name","address":"Address of org"}, {"org":"Org Name","address":"Address of org"}]

Answer 1

首次处理数据库查找时，在页面的HTML中构建一个（org＆gt;地址）数组作为全局Javascript变量。

在select上调用一个Javascript函数，重新编写显示地址的div / span的innerhtml。

这里没有代码，因为这是一项家庭作业。

Answer 2

如@ Dave-S所述，您需要构建一个数组。由于我不知道它是什么样的，它没有包含在示例中，你只是在脚本中注释了关于它的行...

编辑：在给出数组之后，这是一个快速修复：

您可以使用jQuery .change() - ＆gt; 将事件处理程序绑定到“更改”JavaScript事件，或在元素上触发该事件。 和 jQuery.parseJSON() - ＆gt; 采用格式良好的JSON字符串并返回生成的JavaScript值。

jQuery（使用v.3.2.1）

$(document).ready( function() {

var addresses = '[ {"org":"Org Name 1","address":"Address of org 1"}, {"org":"Org Name 2","address":"Address of org 2"}, {"org":"Org Name 3","address":"Address of org 3"} ]';

$("#changeit").change(function (){ // we use the function 'on change'

  $('select#changeit option:selected').each(function() { // the select
    selectedval = $(this).val(); // we catch the value of the selected option

    var obj = jQuery.parseJSON(addresses); // we parse the array (see link to DOC)
    var address = obj[selectedval-1].address; // we access the data
    // note that 'selectedval' is minus 1 as array start with 0

    $('#output').html(address); // we print it in the div
    });

  });
});

HTML

  <select class="form-select" id="changeit" name="changeit">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
  </select>

<p>Selected: <span id="output" name="output"></span></p>

在提交表单之前，回显基于表单中所选对象的链接

2 个答案: