實現輸入框與下拉框聯動效果

這次帶給大家實現輸入框與下拉框連動效果，實現輸入框與下拉框聯動效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

如圖：

#html程式碼

<tr>
 <th>奖励类型：</th>
 <td>
<input>
  <select> 
   <option>---请选择---</option>
   {foreach $reward as $value}
   <option>{$value['material_name']}</option>
   {/foreach}
  </select>
 </td>
</tr>

JQuery程式碼

<script>
 $(&#39;#reward&#39;).bind(&#39;input propertychange&#39;, function() {reward();});
 function reward()
 {
  var search = $("#reward").val();
  $.ajax({ 
   type:"get", 
   url:"/mall/config_commodity_info/search_commodity_info", 
   data:{search:search}, 
   success:function(select){ 
     var reward_id = $("#reward_id"); 
     if (select) {
     $("option",reward_id).remove();
     var obj = JSON.parse(select);
     for (var key in obj) {
      var option = "<option value=&#39;"+key+"&#39;>"+obj[key]+""; 
      reward_id.append(option); 
     }
     } 
   } 
 });
 } 
</script>

PHP程式碼

public function add_alms()
{
 $reward = $this->materials->selReward();
 $this->assign('reward',$reward);
 return $this->fetch();
}
public function do_add_alms()
{
 $data = Request::instance()->param();
 $this->alms->addAlms($data);
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Jquery下拉框資料動態取得該如何實現

Ajax與Jquery結合資料庫做出實現下拉方塊的二級連動

jQuery實作遞歸無限層功能

jquery取得select標籤的值及文字

#

以上是實現輸入框與下拉框聯動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！