如何在 PHP 中创建动态搜索栏而无需在 PHP 中刷新页面

Question

<div data-role="page" id="page">
    <div data-role="header">
    <h4> Page Refresh</h4>
    </div>
    <div data-role="content">       
          <div data-role="fieldcontain" data-theme="b">
            <ul data-role="listview" data-inset="true">
            <li data-role="list-divider"> List of Contractors </li>         
                <li> 
                    <label for="select-choice-1" class="select">Main Location</label>
                       <select name="main_location" id="select-choice-1">
                          <option value="NSW">NSW</option>
                          <option value="ACT">ACT</option>
                          <option value="VIC">VIC</option>
                          <option value="SA">SA</option>
                          <option value="QLD">QLD</option>
                          <option value="NT">NT</option>
                          <option value="WA">WA</option>
                          <option value="TAS">TAS</option>
                        </select>                     
              </li> <!-- Select Menus: Main Location-->  
                <li>  <h3> Company 1 in NSW  </h3>    </li>                     
                <li>  <h3> Company 2 in NSW  </h3>    </li>                     
                <li>  <h3> Company 3 in NSW  </h3>    </li>                     
                <li>  <h3> Company 4 in NSW  </h3>    </li>                                                         
          </div>       
    </div>
    <div data-role="footer">
    </div>
</div>

我有一个下拉列表，其中包含国家列表，在其下方是公司列表。

我

想知道我是否可以根据下拉列表中选择的值动态填充没有页面刷新的公司列表。

简而言之，如果值选择了新南威尔士州，则公司列表应仅包含新南威尔士州的公司。

如果有人能用一个例子来解释我，我将不胜感激。

Answer 1

PHP 代码由服务器读取，然后输出转换为 HTML。

再次读取 PHP 的唯一方法(在页面上执行操作后(是重新提交页面或定向到新页面。

你可以使用 JavaScript 在客户端做事，但同样，PHP 代码只在开始时读取。

下面是一个使用 JS 可以执行的操作示例：

<form name="vehicle">
    Car Make: 
    <select name="carbrand" onChange="updatecartype(this.selectedIndex)" >
    <option selected>Select A Car Brand</option>
    <option value="ford">Ford</option>
    <option value="mazda">Mazda</option>
    <option value="kia">Kia</option>
    </select>
    Car Model: 
    <select name="cartype" >
    <option value="NONE" selected>-------------------</option>
    </select>
</form>
<script type="text/javascript">
    var carbrandlist=document.vehicle.carbrand
    var cartypelist=document.vehicle.cartype
    var cartype=new Array()
    cartype[0]=""
    cartype[1]=["Focus|focus", "F-150|f150", "Taurus|taurus"]
    cartype[2]=["Protege|protege", "Tribute|tribute", "RX-8|rx8", "CX-9|cx9"]
    cartype[3]=["Rio|rio", "Sedona|sedona", "Optima|optima", "Soul|soul", "Sorento|sorento"]
    function updatecartype(selectedcar){
        cartypelist.options.length=0
        if (selectedcar>0){
            for (i=0; i<cartype[selectedcar].length; i++)
            cartypelist.options[cartypelist.options.length]=new Option(cartype[selectedcar][i].split("|")[0], cartype[selectedcar][i].split("|")[1])
        }
    }
</script>

这是一个直接的重新提交/2页面方法，仅使用PHP，根据要求。

//step1.php
//================
<form method='post' action='step2.php'>
Choose State <br>
<select name='state'>
<option value='MI'>Michigan</option>
<option value='IL'>Illinois</option>
</select>
<input type='submit' value='Select State'>
</form>

//step2.php
//================
<form method='post' action='step3.php'>
Choose Company <br>
<select name='company'>
<?php
$state_choice = $_POST['state'];
if ($state_choice == 'MI') {
    echo "<option value='ABC'>Company ABC</option>";
    echo "<option value='DEF'>Company DEF</option>";
}
if ($state_choice == 'IL') {
    echo "<option value='UVW'>Company UVW</option>";
    echo "<option value='XYZ'>Company XYZ</option>";
}
?>
</select>
<input type='submit' value='Select Company'>
</form>

Answer 2

这是一个简单的例子：

• http://www.w3schools.com/php/php_ajax_database.asp