如何讓最終用戶看到的<option>

我有這樣的代碼文本，與聖經的書全是一個元素中：如何讓最終用戶看到的<option>

<option value="1">Genesis</option> 
<option value="2">Exodus</option> 
<option value="3">Leviticus</option> 
<option value="4">Numbers</option> 
<option value="5">Deuteronomy</option> 
<option value="6">Joshua</option> 
<option value="7">Judges</option>

爲了進一步解釋，我有值的書ID，所以當我從我的數據庫中獲取所有經文時，我只能通過書號來引用它們。

但是這樣做，我沒有辦法讓用戶查看友好名稱，如「創世紀」，以便我可以這樣格式化。

如何從JavaScript中獲取這個（當前選中的，即「Genesis」不是'1'）？

來源

2014-01-12 ilarsona

你是什麼意思「讓用戶看到友好的名字」？你需要從哪裏得到它？您是否設置了其中一個選項的'selected'屬性，並且您需要獲取所選內容的文本？ –

編輯。希望這會更具體。 – ilarsona

你並沒有真正解釋你卡在哪裏。你不知道如何獲取'select'元素？或者你不知道如何獲得當前選擇的「選項」？或者你不知道如何從選項中獲取文本內容？ –

保存您的getElementById像sel變量的結果，然後執行以下操作：

var text = sel.options[sel.selectedIndex].text;

選擇元素有一個.options屬性，它爲您提供了所有嵌套選項元素的類似數組的集合。它們還具有.selectedIndex屬性，該屬性返回當前選定元素的索引。

使用這兩個，你可以得到當前選擇的選項。然後只需使用.text即可獲取所選option的文本內容。

如果您不需要支持IE6/7，你可以用document.querySelector()來讓事情變得更短。

var text = document.querySelector("#the_select_id option:selected").text;

的querySelector()方法返回單個元件，或null如果沒有被發現。還有一個querySelectorAll()方法將返回一組元素，這對於您的選擇器應該匹配多個元素時非常有用。

來源

2014-01-13 00:12:13

如果你的父元素具有NAME =「書」作爲一個屬性，是一個選擇的元素，那麼你就可以做到這一點使用jQuery：

var bookName = $('select[name="books"] option:selected').text();

如果你的父元素都有一個id =「書」作爲一個屬性，是一個選擇元素，那麼你就可以做到這一點使用普通的JavaScript（大概可以在提高）：

var books = document.getElementById('books'); 
var bookName = books.options[books.selectedIndex].text;

來源

2014-01-12 23:19:15

如何讓最終用戶看到的<option>

回答

相關問題