如何将JavaScript结果转换为将下拉列表显示为 <option val="“value”" value=Text>文本</option>

Question

以下是下拉列表的代码。 第二个下拉结果将根据第一个下拉选择进行填充。 使用此代码，一切正常。

但是问题在于，它在第二个下拉菜单中以文字和值的形式显示出hospital_id 。 我想将值保留为hospital_id ，但是如何将文本更改为hospital_name （这是表mfb_hospital另一列）。

我的代码：

<?php
  $db = new mysqli('localhost','root','redhat','echodeve_mfb_temp');//set your database handler
  $query = "SELECT bp_id,bp_name FROM mfb_billing";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $categories[] = array("bp_id" => $row['bp_id'], "val" => $row['bp_name']);
  }

  $query = "SELECT bp_id, hospital_id, hospital_name FROM mfb_hospital";
  $result = $db->query($query);

  while($row = $result->fetch_assoc()){
    $subcats[$row['bp_id']][] = array("bp_id" => $row['bp_id'], "val" => $row['hospital_id']);
  }

  $jsonCats = json_encode($categories);
  $jsonSubCats = json_encode($subcats);


?>

<!docytpe html>
<html>

  <head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
    <script type='text/javascript'>
      <?php
        echo "var categories = $jsonCats; \n";
        echo "var subcats = $jsonSubCats; \n";
      ?>
function loadCategories(){
        var select = document.getElementById("categoriesSelect");
        select.onchange = updateSubCats;
        for(var i = 1; i < categories.length; i++){
          select.options[i] = new Option(categories[i].val,categories[i].bp_id);          
        }
      }
      function updateSubCats(){
        var catSelect = this;
        var catid = this.value;
        var subcatSelect = document.getElementById("subcatsSelect");
        subcatSelect.options.length = 0; //delete all options if any present
        for(var i = 0; i < subcats[catid].length; i++){
          subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].hosp);
        }
      }
    </script>
<script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
        dateFormat: "yy-mm-dd",
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
        dateFormat: "yy-mm-dd",
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>

  <body onload='loadCategories()'>
   <form id="reportvalue" action="backend.php" method="post">

    <select id='categoriesSelect'>
        <option value="1">Select Billing Provider</option>
    </select>

    <select name='hospitalname[]' id='subcatsSelect' multiple='multiple'>
        <option value="all">Select Billing Provider</option>
    </select>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
<?php
//$a = $_REQUEST['hospitalname[]'];
//echo $a;
?>
   <input type="submit" name="Submit" value="Submit">
  </form>
  </body>
</html>

Answer 1

我建议您使用.append函数的id，下面是一个简单的示例：

        $.each(json, function(){

        $('#subcatsSelect').append("<option value='"+json.id+"'>"+json.name+"</option>");
    });

注意：

$ .each（json，function（）只是您用来填充第二个选择选项的操作的示例。

如何将JavaScript结果转换为将下拉列表显示为 <option val="“value”" value=Text>文本</option>

问题描述

1 个解决方案

解决方案1
0 2015-04-26 09:44:31

如何将JavaScript结果转换为将下拉列表显示为 <option val="“value”" value=Text>文本</option>

问题描述

1 个解决方案

解决方案1 0 2015-04-26 09:44:31

解决方案1
0 2015-04-26 09:44:31