HTML獲取選項名稱

我想獲得select選項的name，但它看起來是空白的，用codepen演示。儘管獲得value的作品，所以我想以相同的方式得到name。HTML獲取選項名稱

正如你所看到的，name是每個選項的不同，因此不能在<select>加入，我想避免使用data-因爲它需要硬編碼這種邊緣情況下爲可重用的功能。

http://codepen.io/anon/pen/wJzQWW?editors=1010

<select> 
    <option name="" value="" selected>Or</option> 
    <option name="tags" value="123">And</option> 
    <option name="not-tags" value="123">Not</option> 
</select>

來源

2017-03-07 dtgq

這可能會混淆你的html格式。 '選項'通常不具有「名稱」組件。你可以通過在'option'上使用'name'來解釋你想要做什麼嗎？ – haxxxton

@haxxxton後端通過在'-'字符處分割並讀取每個組件來解析'name'。如果第一個組件是'not'，那麼它會執行一個SQL'NOT'查詢等等。還有其他類似的修飾符用於查詢，這只是一個例子。 – dtgq

你可以利用'value'屬性嗎？或者你需要其他東西？或者，如果您必須使用'name'，您可能需要一個js解決方案，該方案會根據您的目標動態創建'name'來創建'hidden'輸入，因爲您當前的解決方案會導致您發生衝突IMO – haxxxton

$（輸入）.find（「：選擇」）將得到您所選擇的選項，從那裏你可以使用VAL（）和attR（）來獲得值

function parseInputs(jqElem, selector = ':input', payload = '') { 
     for (let input of $(jqElem).find(selector)) { 
     const value = $(input).find(":selected").val(); 
     const name = $(input).find(":selected").attr("name"); 
     if (!value) { 
      continue 
     } 
     payload += `&${name}=${value}`; 
     } 
     return payload.substring(1); 
    }

來源

2017-03-07 00:23:07

謝謝。這仍然需要對可重用函數進行一些硬編碼，但這可能是目前規範中最好的。一個問題：爲什麼你使用'const'？我用'let'試過了，它似乎可行，但有沒有理由不使用它？ – dtgq

你可以使用「let」，「var」或「const」，都可以。但是看到價值和名稱在這個範圍內可能不會改變，將它們設置爲常數是最好的方法，無論是在技術上還是「人性化」。 –

也許你有一個困惑。 The tag option doesn't have a name attribute。 name屬性可以存在於select標籤中。

如果您想知道選擇了哪個選項，則必須聽change事件處理select元素，並以value爲準。 Look here。

或者，也許你可以嘗試像dataset這樣的東西，但你必須經常聽change事件。

來源

2017-03-07 00:15:22

Okey 。對於那個很抱歉。但這是一個奇怪的問題。查看[官方規範]（https://www.w3.org/wiki/HTML/Elements/option）。選項沒有名稱屬性。如果你想做類似於使用數據集的東西，那麼這是正確的方法之一。 –

是的，我知道，這就是我在我的問題中所說的避免使用'data-'，我說爲什麼。事件監聽器似乎對此過度。你沒有任何道歉。但是三位認爲這應該受到更多關注的選民比另外兩個有實際工作解決方案的答案需要檢查他們的大腦。 – dtgq

這是一個非常奇怪的問題，但我不會嘮叨這件事。這裏是你如何做到這一點的kickass方式：

function parseInputs(jqElem, selector = ':input', payload = '') { 
    payload =""; 
    $(jqElem).find(selector).each(function() { 
     input = $(this); 
     payload += "&" 
       + $(this).find("option[value=\"" + input.val() + "\"]").attr("name") //just a heads up, if there is more than one with the same value, this won't work... 
       + "=" + 
       input.val(); 
    }); 
    return payload; 
} 

$('#asdf').on('click',() => { 
    console.log(parseInputs('#wtf')); 
});

來源

2017-03-07 00:21:51 Neil

工作。我不確定它是否是最好的解決方案（仍在閱讀邏輯），我不確定爲什麼有人在沒有評論的情況下貶低了你的評價，但至少應該投票，因爲它有效。 – dtgq

我不認爲這是最好的解決方案，但是這種功能在本地HTML中確實不存在。不好意思，朋友;我希望你能得到更好的解決方案。 – Neil

HTML獲取選項名稱

回答

相關問題