MozTW 討論區
https://forum.moztw.org/

如何用javascript取得listcell的值(value/label)?
https://forum.moztw.org/viewtopic.php?f=18&t=16316		 第 1 頁 (共 1 頁)
發表人:  bluelarva [ 2006-11-08, 17:32 ]
文章主題 :  如何用javascript取得listcell的值(value/label)?
如何用javascript取得listcell的值(value/label)?

謝謝
發表人:  kourge [ 2006-11-08, 18:39 ]
文章主題 : 
listcell 指的是 <select> 元素嗎？
假如是這樣...設以下 HTML
<select size="5" id="edit-taxonomy-1" multiple="multiple">
<option value="0"></option>
<option value="1">Articles</option>
<option value="2">Designs</option>
<option value="3">Miscellaneous</option>
<option value="4">Projects</option>
</select>
如果你選了 Designs，那麼 document.getElementById('edit-taxonomy-1').value 會等於 2。
如果使用者選了多重的數值就沒那麼簡單了...
你必須...
var values = []; //宣告空陣列
var options = document.getElementById('edit-taxonomy-1').getElementsByTagName('option'); //取得所有屬於 edit-taxonomy-1 的 <option> 子元素
for (i = 0; i < options.length; i++) { //迴圈
if (options[i].selected) values.push(options[i].value); //如果被選了，就推到空陣列裡面
}
所以如果使用者選了 Designs 和 Projects，那麼 value 變數就會是個陣列：[2, 4]
所以最好的方法就是乾脆又後面比較複雜的程式碼，除非你確定你不會讓人選多重的選項。

如果你要 label，把 selected 屬性換成 label 就行了。
發表人:  bluelarva [ 2006-11-08, 21:55 ]
文章主題 : 
不好意思.

我忘了說明這是XUL.

代碼:
<listbox id="fileList" seltype="multiple" flex="1">
  <listhead>
    <listheader label="Name"/>
    <listheader label="Size"/>
    <listheader label="Type"/>
    <listheader label="Modified" />
  </listhead>
  <listcols >
    <listcol flex="1"/>
    <listcol flex="1"/>
    <listcol flex="1"/>
      <listcol flex="1"/>   
  </listcols>
    <listitem>
        <listcell label="abc.txt" />
        <listcell label="34243" />
        <listcell label="text" />
        <listcell label="423324" />
    </listitem>
</listbox>   

如何用javascript 取出listcell的value (abc.txt):)
發表人:  kourge [ 2006-11-11, 01:37 ]
文章主題 : 
bluelarva 寫:
不好意思.

我忘了說明這是XUL.

代碼:
<listbox id="fileList" seltype="multiple" flex="1">
  <listhead>
    <listheader label="Name"/>
    <listheader label="Size"/>
    <listheader label="Type"/>
    <listheader label="Modified" />
  </listhead>
  <listcols >
    <listcol flex="1"/>
    <listcol flex="1"/>
    <listcol flex="1"/>
      <listcol flex="1"/>   
  </listcols>
    <listitem>
        <listcell label="abc.txt" />
        <listcell label="34243" />
        <listcell label="text" />
        <listcell label="423324" />
    </listitem>
</listbox>   

如何用javascript 取出listcell的value (abc.txt):)

代碼:
//<(= =)>  <-非 js
var listcells = document.getElementById('fileList').getElementsByTagName('listcell');
var values = [];
for (i = 0; i < listcells.length; i++) {
  values.push(listcells[i].label);
}

這樣 values 陣列會變成：
代碼:
['abc.txt', '34243', 'text', '423324'];

假如你有用 prototype.js 這個 JavaScript framework 會更簡單（不過...有人把 Prototype 用在 XUL 嗎？真是前所未見）：
代碼:
var values = $$('#fileList listcell').pluck('label');

就這麼簡單，差別就是這麼大（好方便～）。$$() 這個函式可以用 CSS 語法來取得元素，pluck 則是可以把單一的屬性從一個陣列的每個物件一一「拔」（pluck）出來，然後再形成一個陣列。

像之前我舉的 HTML 例子，囉唆一堆：
代碼:
var values = [];
var options = document.getElementById('edit-taxonomy-1').getElementsByTagName('option');
for (i = 0; i < options.length; i++) {
  if (options[i].selected) values.push(options[i].value);
}

如果用 prototype.js，只要這樣即可：
代碼:
var values = $F('edit-taxonomy-1');

很簡潔。
發表人:  bluelarva [ 2006-11-13, 20:04 ]
文章主題 : 
謝謝,又大開眼界了.

突然發覺,要編XUL,javascript的造詣要很深才能無往不利.

:)
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/