ホームページ > ウェブフロントエンド > jsチュートリアル > 入力ボックスとドロップダウンボックスの連動効果を実現

入力ボックスとドロップダウンボックスの連動効果を実現

php中世界最好的语言
リリース: 2018-03-15 09:55:51
オリジナル
3654 人が閲覧しました

今回は、インプットボックスとドロップダウンボックスの連携効果を実現するための注意点と、インプットボックスとドロップダウンボックスの連携効果を実現するための

注意点

についてお届けします。以下は実際的なケースですので、見てみましょう。 写真に示すように:

htmlコード

<tr>
 <th scope="row">奖励类型:</th>
 <td><input value="" type="text" name="item" id="reward" style="width: 60px;height: 20px;" placeholder="输入关键字" />
  <select name="reward_id" id="reward_id"> 
   <option value="">---请选择---</option>
   {foreach $reward as $value}
   <option value="{$value[&#39;material_id&#39;]}">{$value['material_name']}</option>
   {/foreach}
  </select>
 </td>
</tr>
ログイン後にコピー

JQueryコード

<script type="text/javascript">
 $('#reward').bind('input propertychange', 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]+"</option>"; 
      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 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:
Jquery ドロップダウン ボックスでデータを動的に取得する方法


Ajax と Jquery をデータベースと組み合わせて、ドロップダウン ボックスを実現するための二次リンケージを作成します


jQuery は実装します再帰的無限レイヤー関数


jqueryはselectタグの値とテキストを取得します

🎜🎜

以上が入力ボックスとドロップダウンボックスの連動効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート