简体   繁体   中英

two drop-down menus with connection

I am using smarty and php. I've got two drop-down menus. Also I've got two database one with categories the other with news which has id of categories. One of the menus read the categories. I want when I choose from the first menus categories the page automatically to refresh and to put into the second drop-down the news with that category.

<form method="post">
        <h3>Category of news</h3>

      <select name="categoriesForm" id="news_cat">   
        <option value="0"></option>  
        {foreach from=$categories item=i}                              
            <option value="{$i.id}"> {$i.name|stripslashes} </option>            
        {/foreach}    
      </select>

        <h3 style="position:absolute;left:500px; top:130px;">Name of news</h3>

        <select name="news" id="news_name" style="position:absolute;left:500px; top:190px;">   
        <option value="0"></option>  
        {foreach from=$news item=i}                              
            <option value="{$i.id}"> {$i.name|stripslashes} </option>            
        {/foreach}    
      </select>


  </form>

this is the controler:

function edit_news(){
                    $cat = $this->news->getCategoriesNews();
                    $this->assign('categories',$cat);


                    $selected_key = $_POST['categoriesForm'];



                    $news = $this->news->getNameNews($selected_key);
                    $this->assign('news',$news);

        }     

and this is the model

 function  getCategoriesNews(){
        return  $this->db->GetAll("SELECT id, name FROM categories ");
   }

   function getNameNews($category){
        return $this->db->GetAll("SELECT name,cat_id FROM news WHERE cat_id = '$category' ");
   }

Well, i have mentioned the overview of the process. I am sure that with little homework, you will be able to implement your functionality.

1) Use onChange on categoriesForm dropdown to call Javascript / jQuery function. So whenever, you change the value of categoriesForm , a script function gets called.

<select name="categoriesForm" id="news_cat" onChange="feed_secondary()">

2) feed_secondary fetches the current value of categoriesForm and fires and ajax call.
3) In ajax call, pass the value of current category.
4) In controller, process category_id and send all news of that category as response.
4) In feed_secondary , handle the response and manipulate secondary dropdown news .

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM