Home Web Front-end JS Tutorial Realize linkage between input box and drop-down box

Realize linkage between input box and drop-down box

Jun 09, 2018 pm 05:53 PM
drop down box monitor Linkage Input box

Below I will share with you an example of real-time monitoring of input boxes and realization of linkage between input boxes and drop-down boxes. It has a good reference value and I hope it will be helpful to everyone.

As shown in the picture:

##html code

1

2

3

4

5

6

7

8

9

10

11

<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[&#39;material_name&#39;]}</option>

   {/foreach}

  </select>

 </td>

</tr>

Copy after login

JQuery code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<script type="text/javascript">

 $(&#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]+"</option>";

      reward_id.append(option);

     }

     }

   }

 });

 }

</script>

Copy after login

PHP code

1

2

3

4

5

6

7

8

9

10

11

public function add_alms()

{

 $reward = $this->materials->selReward();

 $this->assign(&#39;reward&#39;,$reward);

 return $this->fetch();

}

public function do_add_alms()

{

 $data = Request::instance()->param();

 $this->alms->addAlms($data);

}

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to read data through json files in Vue2.5

Using http in vue2.5.2 Request how to get static json data

Using plugin owlcarousel in jQuery slideshow (detailed tutorial)

In ES6 arrow function about this The problem?

What are the methods to use echarts3.0 adaptive in vue?

How to solve the problem of sliding failure of dynamically loaded data in swiper?

The above is the detailed content of Realize linkage between input box and drop-down box. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1269
29
C# Tutorial
1249
24
How long is home monitoring usually kept? How long is home monitoring usually kept? Aug 30, 2023 pm 04:44 PM

Home monitoring is generally kept for one to two weeks. Detailed introduction: 1. The larger the storage capacity, the longer the video can be saved; 2. The larger the capacity of the hard disk, the longer the video can be saved; 3. According to the requirements of different regions and laws and regulations, the number of surveillance videos The storage time may vary; 4. Some advanced surveillance systems can also trigger recording based on motion detection or specific events, thereby saving storage space and providing more useful recordings.

Python script for monitoring website changes Python script for monitoring website changes Aug 29, 2023 pm 12:25 PM

In today's digital age, being aware of the latest changes on your website is crucial for a variety of purposes, such as tracking updates on your competitors' websites, monitoring product availability, or staying informed of important information. Manually checking your website for changes can be time-consuming and inefficient. This is where automation comes into play. In this blog post, we will explore how to create a Python script to monitor website changes. By leveraging the power of Python and some handy libraries, we can automate the process of retrieving website content, comparing it to previous versions, and notifying us of any changes. This allows us to remain proactive and react promptly to updates or modifications to the sites we monitor. Setting up the environment Before we start writing scripts to monitor website changes, we need to set up P

Zhengtu IPx classic animation 'Journey to the West' The journey to the west is fearless and fearless Zhengtu IPx classic animation 'Journey to the West' The journey to the west is fearless and fearless Jun 10, 2024 pm 06:15 PM

Journey through the vastness and set foot on the journey to the west! Today, Zhengtu IP officially announced that it will launch a cross-border cooperation with CCTV animation "Journey to the West" to jointly create a cultural feast that combines tradition and innovation! This cooperation not only marks the in-depth cooperation between the two major domestic classic brands, but also demonstrates the unremitting efforts and persistence of the Zhengtu series on the road of promoting Chinese traditional culture. Since its birth, the Zhengtu series has been loved by players for its profound cultural heritage and diversified gameplay. In terms of cultural inheritance, the Zhengtu series has always maintained respect and love for traditional Chinese culture, and skillfully integrated traditional cultural elements into the game, bringing more fun and inspiration to players. The CCTV animation "Journey to the West" is a classic that has accompanied the growth of generations.

Real-time log monitoring and analysis under Linux Real-time log monitoring and analysis under Linux Jul 29, 2023 am 08:06 AM

Real-time log monitoring and analysis under Linux In daily system management and troubleshooting, logs are a very important data source. Through real-time monitoring and analysis of system logs, we can detect abnormal situations in time and handle them accordingly. This article will introduce how to perform real-time log monitoring and analysis under Linux, and provide corresponding code examples. 1. Real-time log monitoring Under Linux, the most commonly used log system is rsyslog. By configuring rsyslog, we can combine the logs of different applications

How to open photos from surveillance camera in Windows 10 How to open photos from surveillance camera in Windows 10 Jul 10, 2023 pm 09:41 PM

If we don’t have a mobile phone at hand, only a computer, but we have to take pictures, we can use the computer’s built-in surveillance camera to take pictures, so how to turn on the win10 surveillance camera, in fact, we only need to download a camera application. The specific method to open the win10 surveillance camera. How to open photos from win10 surveillance camera: 1. First, use the disk shortcut key Win+i to open settings. 2. After opening, enter the personal privacy settings. 3. Then turn on access restrictions under camera phone permissions. 4. Once opened, you just need to open the camera application software. (If not, you can go to the Microsoft store to download one) 5. After opening, if the computer has a built-in surveillance camera or an external surveillance camera is assembled, you can take pictures. (Because people don’t have cameras installed

How to implement request logging and monitoring in FastAPI How to implement request logging and monitoring in FastAPI Jul 30, 2023 am 08:29 AM

How to implement request logging and monitoring in FastAPI Introduction: FastAPI is a high-performance web framework based on Python3.7+. It provides many powerful functions and features, including automated request and response model verification, security, and performance optimization. wait. In actual development, we often need to record request logs in the application for debugging and monitoring analysis. This article will introduce how to implement request logging and monitoring in FastAPI and provide corresponding code examples. 1. Installation

Laravel monitoring errors: improve application stability Laravel monitoring errors: improve application stability Mar 06, 2024 pm 04:48 PM

Monitoring errors in Laravel is an important part of improving application stability. During the development process, various errors will inevitably be encountered, and how to detect and resolve these errors in a timely manner is one of the keys to ensuring the normal operation of the application. Laravel provides a wealth of tools and functions to help developers monitor and handle errors. This article will introduce some of the important methods and attach specific code examples. 1. Use logging Logging is one of the important means of monitoring errors. Laravel has a powerful logging system built-in, developers

Fried chicken is a great business and there is no room for error! 'Backwater Cold' links up with KFC, causing players to 'dance upon hearing the chicken' Fried chicken is a great business and there is no room for error! 'Backwater Cold' links up with KFC, causing players to 'dance upon hearing the chicken' Apr 17, 2024 pm 06:34 PM

On the date, "Backwater Cold" officially announced that it will launch a linkage with KFC from April 19th to May 12th. However, the specific content of the linkage has left many people stunned. They repeatedly said, "It's embarrassing to heaven" and "It's important to society." died"! The reason lies in the slogan of this theme event. Friends who have seen the KFC linkage of "Genshin Impact" and "Beng Tie" must have the impression that "encountering another world and enjoying delicious food" has become a reality in "Ni Shui Han" Now: shout out to the clerk, "God is investigating the case, who are you?" The clerk needs to reply, "Fried chicken is a big business, and there is no room for error!" Training guide for employees: Never laugh! Not only that, this collaboration also held a dance competition. If you go to the theme store and perform the "Dance when you hear 'Ji'" dance move, you can also get a small rocking music stand. Embarrassing, so embarrassing! But that's what I want

See all articles