作者 主題: 透過動態階層下拉選單產生文字欄位  (閱讀 7528 次)

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

huangxianqin

  • 憂鬱的高中生
  • ***
  • 文章數: 129
    • 檢視個人資料
我先簡述一下程式要求:
當使用者按下下拉式選單選擇了"其他"時,會在之後產生一個可填寫的文字欄位,而若選擇其他項目["台北市"、"台北縣"],則會產生另一個選單。
目前雖然有做到,但是不是很完美,我想應該有其他更好的寫法可以避免產生如圖的問題,想請問大大們該如何解決呢?

這是一開始的樣子


點選階層一選單出現階層二


點選其他,則會出現文字欄位而用css來隱藏階層二選單


如果再點選台北市、台北縣,則隱藏文字欄位而顯示階層二選單,不過都會留下欄位大小


如果再點選其他,則隱藏階層二選單而顯示文字欄位,不過都會留下欄位大小


以下是相關的程式碼:
代碼: [選擇]

<select name="landloadsec1" id="landloadsec1" onChange="SC1(this.selectedIndex);">
<option value="none">請選擇區域</option>
<option value="台北市">台北市</option>
<option value="台北縣">台北縣</option>
<option value="其他">其他</option>
</select>
<select name="landloadsec2" ></select>


代碼: [選擇]

var C_list = "";
var C1_list = "";
var C_list2 = "";
var C1_list2 = "";

var C1 = new Array();
C1[0] = "";
C1[1] = ["北投區", ....., "文山區"];
C1[2] = ["萬里鄉", "金山鄉", ......., "三芝鄉", "石門鄉"];


function SC1(IDX){
  C1_list.options.length = 0;
  if (IDX==3)
  {
 C1_list.style.visibility='hidden';
 //當選取其他時,應該把第二個options隱藏,改顯示input type=text欄位
 if(!document.getElementById('landloadtext'))
 {
 var newtextinput= document.createElement('input');
 newtextinput.type='text';
 newtextinput.name='landloadtext';
 newtextinput.id='landloadtext';
 newtextinput.size='8';
 newtextinput.maxlength='6';
 landtd.insertBefore(newtextinput,C1_list);
 }
 document.fa.landloadtext.style.visibility='visible';
  }
  else if (IDX ==1 || IDX==2)
  {
if(document.getElementById('landloadtext'))
{ document.fa.landloadtext.style.visibility='hidden'; }
    C1_list.style.visibility='visible';
  for (i=0; i<C1[IDX].length; i++)
C1_list.options[C1_list.options.length] = new Option(C1[IDX][i]);
  }
}

function init(){
  C_list = document.fa.landloadsec1;
  C1_list = document.fa.landloadsec2;
  C_list2 = document.fa.studentsec1;
  C1_list2 = document.fa.studentsec2;
}


希望有大大能提供更好的解決方式? :wink:

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
透過動態階層下拉選單產生文字欄位
« 回覆 #1 於: 2007-04-09 20:53 »
改用 style.display 的話呢 ?

或是該欄位如果用<div> 包起來的話呢  :roll:


另..

C_list = document.fa.landloadsec1;
....

這幾行建議改用 getElementById() 的方式取得!

huangxianqin

  • 憂鬱的高中生
  • ***
  • 文章數: 129
    • 檢視個人資料
透過動態階層下拉選單產生文字欄位
« 回覆 #2 於: 2007-04-10 10:41 »
先謝謝大大回覆 :D

一開始讓標籤隱藏時,我的確是採用style.dislplay的方式,不過隱藏之後要讓該標籤再度出現的話,我卻找不到像visibility='visible' or 'hidden'這樣用的方法

div去設定讓階層二與文字欄位放在一起嗎?但是我不太清楚即使放在一起了,應該要如何透過javascript去控制顯示[我初步的想法是往左移顯示階層二、往右顯示文字欄位]


如果大大有更詳細的想法,煩請告知小弟,謝謝~~

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
透過動態階層下拉選單產生文字欄位
« 回覆 #3 於: 2007-04-10 11:11 »
style.dislplay = '';  -> 顯示
style.dislplay = 'none';  -> 隱藏

patrick

  • 可愛的小學生
  • *
  • 文章數: 17
    • 檢視個人資料
    • http://www.sohoweb.idv.tw/
Re: 透過動態階層下拉選單產生文字欄位
« 回覆 #4 於: 2007-04-10 14:30 »
display
 這個性質可設定整個元件顯示的方式。
 none代表不顯示,且此元件不佔任何空間。block代表顯示,並視為區塊,前後緊臨的元件將換行顯示。inline代表顯示,但前後緊臨的元件會排在其左右,並不會換行。
 display:none,此元件就被隱藏了!
 
visibility
 設定此元件要不要顯示,這個性質與display有相似之處,但不相同。
 可用值有visible(顯示)、inherit(繼承)、hidden(隱藏,但仍佔有空間,此與display:none不同)。
 如visibility:hidden,則可隱藏此元件。
 
!important
 這個屬性質可跨越層級的優先順序而優先使用。
 有加入!important的屬性會優先使用。例如:color:red !important; 這時即使優先權較低,文字也會變成紅色。

micmic3

  • 俺是博士!
  • *****
  • 文章數: 1692
    • 檢視個人資料
透過動態階層下拉選單產生文字欄位
« 回覆 #5 於: 2007-04-10 15:48 »
!important  似乎不是標準用法

huangxianqin

  • 憂鬱的高中生
  • ***
  • 文章數: 129
    • 檢視個人資料
透過動態階層下拉選單產生文字欄位
« 回覆 #6 於: 2007-04-12 18:22 »
patrick大大,謝謝您詳細的解說,小弟可以把他整理至部落格作個筆記嗎 :)
引用

display
這個性質可設定整個元件顯示的方式。
none代表不顯示,且此元件不佔任何空間。block代表顯示,並視為區塊,前後緊臨的元件將換行顯示。inline代表顯示,但前後緊臨的元件會排在其左右,並不會換行。
display:none,此元件就被隱藏了!

visibility
設定此元件要不要顯示,這個性質與display有相似之處,但不相同。
可用值有visible(顯示)、inherit(繼承)、hidden(隱藏,但仍佔有空間,此與display:none不同)。
如visibility:hidden,則可隱藏此元件。


目前問題已解決,謝謝~

snaking

  • 可愛的小學生
  • *
  • 文章數: 6
    • 檢視個人資料
透過動態階層下拉選單產生文字欄位
« 回覆 #7 於: 2007-04-13 03:15 »
你可以參考一下這支程式,雖然不完全合乎你的需求,但也許能有一些啟發:
http://tw2world.com/tools/css_editor/css_help.htm