作者 主題: 動態產生二階層式的下拉式選單?  (閱讀 16568 次)

0 會員 與 1 訪客 正在閱讀本文。

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
動態產生二階層式的下拉式選單?
« 於: 2010-09-29 17:11 »
各位大大:
資料來源是由DB所取出,第一個選單和第二個選單的資料都是一樣,也就是第一個和第二個的都資料都是a,b,c,d
但是當第一個選擇a時,則第二個只會有b,c,d,以此類推,也就是第二個列出的資料會扣掉第一個選的

請問這要怎麼用php和javascript 完成呢?

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #1 於: 2010-09-29 18:09 »
各位大大:
資料來源是由DB所取出,第一個選單和第二個選單的資料都是一樣,也就是第一個和第二個的都資料都是a,b,c,d
但是當第一個選擇a時,則第二個只會有b,c,d,以此類推,也就是第二個列出的資料會扣掉第一個選的

請問這要怎麼用php和javascript 完成呢?


用 javascript, 在第一層 <select> 的 onchange 事件處理
當第一層有變動時, 第二層直接清除然後去抓第一層被選中的項目以下的項目

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #2 於: 2010-09-29 23:21 »
Yamaka大大:

代碼: [選擇]
<script>
function buildSelect2()
{
          //照大大說的當第一層有變動時, 第二層直接清除然後去抓第一層被選中的項目?????

}
</script>
..................
echo "<td>";
echo "<select name=\"select1\" size=\"0\"   onchange = buildSelect2() >" ;
for ($i=0;$i<$result_num;$i++)
{
$row = mysql_fetch_array($result);
$addr= $row['addr'];
echo "<option value=$addr>$addr</option>";

}
echo "</td>";

echo "<td>";
                 $sql = "select addr from customer where addr <> (第一個選單的值)";  //請問在這第二個選單要怎麼取得第一個選單的值,才能過濾掉???
echo "<select name=\"select2\" size=\"0\"  >" ;
for ($i=0;$i<$result_num;$i++)
{
$row = mysql_fetch_array($result);
$addr= $row['addr'];
echo "<option value=$addr>$addr</option>";

}
echo "</td>";


« 上次編輯: 2010-09-29 23:28 由 NARs »

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #3 於: 2010-09-30 16:43 »
代碼: [選擇]
<script>
function buildSelect2()
{
          //照大大說的當第一層有變動時, 第二層直接清除然後去抓第一層被選中的項目?????

}
</script>
..................
echo "<td>";
echo "<select name=\"select1\" size=\"0\"   onchange = buildSelect2() >" ;
for ($i=0;$i<$result_num;$i++)
{
$row = mysql_fetch_array($result);
$addr= $row['addr'];
echo "<option value=$addr>$addr</option>";

}
echo "</td>";

echo "<td>";
                 $sql = "select addr from customer where addr <> (第一個選單的值)";  //請問在這第二個選單要怎麼取得第一個選單的值,才能過濾掉???
echo "<select name=\"select2\" size=\"0\"  >" ;
for ($i=0;$i<$result_num;$i++)
{
$row = mysql_fetch_array($result);
$addr= $row['addr'];
echo "<option value=$addr>$addr</option>";

}
echo "</td>";



上面只是由 php 產生的『靜態』選單啊
第2層要能在網頁動態變化就要在 buildSelect2 裡處理

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #4 於: 2010-10-06 11:40 »
Yamaka大大,
照你所說第2層要能在網頁動態變化就要在 buildSelect2 裡處理,但是請問要如何取得第一層所選的值?

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #5 於: 2010-10-06 12:22 »
Yamaka大大,
照你所說第2層要能在網頁動態變化就要在 buildSelect2 裡處理,但是請問要如何取得第一層所選的值?

select 物件的 value, 例如  selectObj.value 就是目前第一層所選中的值
selectObj 怎麼來的呢, 可以直接由 buildSelect2(this) 傳過來
或是在 buildSelect2() 裡用 getElementById() 取得

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #6 於: 2010-10-06 13:49 »
Yamaka大大,
照你所說的使用 buildSelect2(this) 傳過來 , 但是第二個下拉式選單卻沒有出現,只有第一個有出現選項,
是在第一個下拉式選單的 onchange = buildSelect2(this)有錯嗎? 不能用onchange嗎?
代碼: [選擇]
<script>
function buildSelect2($select1)
{
          <?
               echo "<td>";   
                 $sql = "select addr from customer where addr <>$select1"; 
        echo "<select name=\"select2\" size=\"0\"  >" ;
        for ($i=0;$i<$result_num;$i++)
        {
            $row = mysql_fetch_array($result);
            $addr= $row['addr'];
            echo "<option value=$addr>$addr</option>";
       
        }
              echo "</td>";
                ?>

}
</script>
..................
echo "<td>";
echo "<select name=\"select1\" size=\"0\"   onchange = buildSelect2(this) >" ;  // 是這裡有錯嗎?
for ($i=0;$i<$result_num;$i++)
{
$row = mysql_fetch_array($result);
$addr= $row['addr'];
echo "<option value=$addr>$addr</option>";

}
echo "</td>";



Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #7 於: 2010-10-06 14:06 »
Yamaka大大,
照你所說的使用 buildSelect2(this) 傳過來 , 但是第二個下拉式選單卻沒有出現,只有第一個有出現選項,
是在第一個下拉式選單的 onchange = buildSelect2(this)有錯嗎? 不能用onchange嗎?
代碼: [選擇]
<script>
function buildSelect2($select1)
{
          <?
               echo "<td>";   
                 $sql = "select addr from customer where addr <>$select1"; 
        echo "<select name=\"select2\" size=\"0\"  >" ;
        for ($i=0;$i<$result_num;$i++)
        {
            $row = mysql_fetch_array($result);
            $addr= $row['addr'];
            echo "<option value=$addr>$addr</option>";
       
        }
              echo "</td>";
                ?>

}
</script>
..................
echo "<td>";
echo "<select name=\"select1\" size=\"0\"   onchange = buildSelect2(this) >" ;  // 是這裡有錯嗎?
for ($i=0;$i<$result_num;$i++)
{
$row = mysql_fetch_array($result);
$addr= $row['addr'];
echo "<option value=$addr>$addr</option>";

}
echo "</td>";



............(無言..)

一開始回應我就說要用 javascript 呀!~
上面的用法還是第一次看到 orz = =|||

樓主該不會...還搞不清楚瀏覽器端跟主機端吧  ::)

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #8 於: 2010-10-06 15:42 »
真是不喜歡沒有用 templates engine 的方式...
找一套 MVC 當核心好嗎... 這樣子寫真的不好!!
或用 smarty,把 php 跟網頁分離,以後維護比較輕鬆哦...

--
兩層就看一下有人寫的郵遞區號那種東西... 以前就有人發表過哦!!
--
TyroneYeh

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #9 於: 2010-10-06 16:12 »
Yamaka大大,
還是不太懂,能有什麼簡單範例可以學習的嗎?

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #10 於: 2010-10-07 02:21 »
飯粒我是沒有, 到是有些生米可以給你

http://www.w3schools.com/jsref/dom_obj_select.asp

連結的網頁裡有詳細說明 select 相關功能
將這頁裡的東西研究清楚, 你要的功能便能輕鬆做出來了

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
兩層式下拉式清單?
« 回覆 #11 於: 2010-10-20 17:55 »
下面會顯示兩個下拉式清單,因為兩個下拉式清單的 資料都是來自同一個table,所以如果第一個A, 則第二個下拉式清單就不會A選項
例如:資料選項有a,b,c
則第一個選了a,則第二個下拉式清單只有b,c選項,請問這要怎麼改呢?


代碼: [選擇]
<form name="aaa" id="aaa" action=""  method="post">
<table >

<tr >

<th>Seller</th>
<th>buyer</th>
<th>Date</th>
<th>addr</th>
<th>price</th>
</tr>
<tbody>
<tr>

<?
 
$sql="select customer from list;";
$result = mysql_query($sql);
if (!$result) {
               die("Query to show fields from table failed");
}
$result_num = mysql_num_rows($result);
echo "<th>";
echo "<select name=\"seller\" size=\"0\"  >" ;
for ($i=0;$i<$result_num;$i++)
{
$row = mysql_fetch_array($result);
$customer = $row['customer '];

echo "<option value=$customer >$customer </option>";

}
echo "</th>";


$sql="select customer from list;";

$result = mysql_query($sql);
if (!$result) {
               die("Query to show fields from table failed");
}
$result_num = mysql_num_rows($result);
echo "<th>";
echo "<select name=\"buyer\" size=\"0\">" ;
for ($j=0;$j<$result_num;$j++)
{
$row = mysql_fetch_array($result);
$customer = $row['customer '];
echo "<option value=$customer >$customer </option>";

}
echo "</th>";

?>
..........
......................

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 兩層式下拉式清單?
« 回覆 #12 於: 2010-10-20 18:33 »
下面會顯示兩個下拉式清單,因為兩個下拉式清單的 資料都是來自同一個table,所以如果第一個A, 則第二個下拉式清單就不會A選項
例如:資料選項有a,b,c
則第一個選了a,則第二個下拉式清單只有b,c選項,請問這要怎麼改呢?

之前不是就說過了嗎, 這種需求可以在 select 的 onchange 用 javascript 做
這樣資料庫只要跑一次就可以, 怎麼前面繞了一圈又還是回到這裡
還是堅持要用 php 來跑這東西, 真的是很無言~ 樓主加油吧...

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #13 於: 2010-10-20 18:57 »

Yamaka 大大,
但是資料要用PHP 取出,要怎麼利用js 去產生下拉式清單選項?大大是不是能提供範例學習呢?

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #14 於: 2010-10-20 19:33 »

Yamaka 大大,
但是資料要用PHP 取出,要怎麼利用js 去產生下拉式清單選項?大大是不是能提供範例學習呢?

第一層是由資料庫撈出來這沒錯啊, 但是第二層依照樓主的想法做法
那是要在第一層選單動作之後送選單資料回主機, 重新抓一次資料
並顯示第二層選單, 這樣做也沒錯, 只是每改變一次選項, 便要回主機抓一次資料

如果是要讓第二層項目根據第一層的資料產生, 那就只要 js 端來做就可以, 大概像這樣..

代碼: (html) [選擇]
< head>
<script>
  function select1OnChabge(obj) {
    var obj2 = document.getElementById('sl2');
    obj2.options.length = 0;
     
    var sdVal = obj.value;
    var oLen = obj.length;
    for (var idx=0; idx<oLen; idx++) {
      //在這裡建立選單2的項目, 跳過值為 sdVal 的項目
    }
  }
</script>
< /head>
< body>
<select size="1" id="sl1" name="sl1" onchange="select1OnChabge(this);">
  <option value="a1">a1</option>
  <option value="b1">b2</option>
  <option value="c1">c3</option>
  <option value="d1">d4</option>
</select>

<select size="1" id="sl2" name="sl2" onchange="alert(this.value);"></select>
< /body>

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #15 於: 2010-10-21 14:07 »
Yamaka 大大,
感謝~~解決了!!!@@

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #16 於: 2010-10-21 14:52 »
Yamaka 大大,
因為第二個下拉式清單沒有設預設值,所以需要做驗證是不是有選,
但是在驗證的時候卻失敗,也就是即使沒選也不會跳出警告視窗,請問是那裡錯了嗎?
代碼: [選擇]
function check_data()
   {
    if (document.getElementById('sl2').selectedIndex == 0)
{
alert("select 2  沒有選哦!");
document.archive.sl2.focus();
return false;
}
return true;
   
   }


代碼: [選擇]
<form name="aaa" id="aaa" action="bbb.php"  onsubmit="return check_data(); method="post">


........
              echo "<td>";
echo "<SELECT id=sl2  size=\"0\" name=\"resuser\"></SELECT>  ";

echo "</td>";


micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #17 於: 2010-10-21 15:05 »
大概是因為沒有option 吧

NARs

  • 活潑的大學生
  • ***
  • 文章數: 227
    • 檢視個人資料
回覆: 動態產生二階層式的下拉式選單?
« 回覆 #18 於: 2010-10-21 17:52 »
解決了@@