做一個聯動的select下拉菜單,讓用戶歸類的選擇

編輯的時候選擇一個很多選擇的東西,所以把文章按照等級來進行選擇

action代碼:

$category=new Model('Category');
        $article=new Model('Article');
        $yila=$category->query("select * from zs_category where pid  in (select id from zs_category where pid=0)");
        $erla=$category->query("select * from zs_category where pid in  (select id from zs_category where pid in (select id from zs_category where pid=0))");
        $sanla=$article->select();
        $count=count($yila);
        $count1=count($erla);
        $this->assign("count",$count);
        $this->assign("count1",$count1);
        $this->assign("yila",$yila);
        $this->assign("erla",$erla);
        $this->assign("sanla",$sanla);

模版代碼:


<label>所屬文章:</label>     
            <SELECT ID="s1">
             <OPTION selected></OPTION>
            </SELECT>
            <SELECT ID="s2">
            <OPTION></OPTION>
            </SELECT>
            <select id="s3"  name="aid">
            <option></option>
            </select>
                                                                                                                                
            <input type="submit" value="編輯"/>



模版中的js代碼:

<script language="javascript" > 
  function CLASS_LIANDONG_YAO(array)
  {
   //數組,聯動的數據源
    this.array=array;
    this.indexName='';
    this.obj='';
    //設置子SELECT
    // 參數:當前onchange的SELECT ID,要設置的SELECT ID
      this.subSelectChange=function(selectName1,selectName2)
    {
                                                                             
    var obj1=document.all[selectName1];
    var obj2=document.all[selectName2];
    var objName=this.toString();
    var me=this;
    obj1.onchange=function()
    {
        me.optionChange(this.options[this.selectedIndex].value,obj2.id)
    }
    }
    //設置第一個SELECT
    // 參數:indexName指選中項,selectName指select的ID
    this.firstSelectChange=function(indexName,selectName)
    {
    this.obj=document.all[selectName];
    this.indexName=indexName;
    this.optionChange(this.indexName,this.obj.id)
    }
  // indexName指選中項,selectName指select的ID
    this.optionChange=function (indexName,selectName)
    {
    var obj1=document.all[selectName];
    var me=this;
    obj1.length=0;
    obj1.options[0]=new Option("請選擇",'');
    for(var i=1;i<this.array.length;i++)
    { 
        if(this.array[i][1]==indexName)
        {
        //alert(this.array[i][1]+" "+indexName);
      obj1.options[obj1.length]=new Option(this.array[i][2],this.array[i][0]);
        }
    }
    } 
  }
  </script>
                                                                           
  <script language="javascript">
//例子1-------------------------------------------------------------
//數據源
var array=new Array();
  <volist name="yila" id="yila">
        array[{$i}]=new Array("{$yila['name']}","根目錄","{$yila['name']}");
  </volist>
  <volist name="erla" id="erla">
        array[{$i}+{$count}]=new Array("{$erla['name']}","{$erla['pid']|getCategoryName}","{$erla['name']}");
  </volist>
  <volist name="sanla" id="sanla">
        array[{$i}+{$count}+{$count1}]=new Array("{$sanla['id']}","{$sanla['tid']|getCategoryName}","{$sanla['title']}");
  </volist>
                                                                           
                                                                            
  //--------------------------------------------
  //這是調用代碼
  var liandong=new CLASS_LIANDONG_YAO(array) //設置數據源
  liandong.firstSelectChange("根目錄","s1"); //設置第一個選擇框
  liandong.subSelectChange("s1","s2"); //設置子級選擇框
  liandong.subSelectChange("s2","s3");
                                                                           
                                                                           
                                                                             
</script>

然後把模版提交上來的數據添加到數據可就可以了。

問題:option中沒有value怎樣提交數據到服務器?

array[{$i}]=newArray("{$yila['name']}","根目錄","{$yila['name']}");

這句裏面,第二個參數是父級的名字,第三個參數是顯示的名字

第一個參數就是value,同時它也是別人的父級名字


--------------------------------------------

開發過程中遇到一個問題,就是js顯示不出來錯誤,但是之前是可以的,對比一看,是增加某一個功能之後添加了相同名字的js動作,導致js顯示錯誤,所以一定要注意js的名字不能一樣


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章