JavaScript的 - 獲取價值的選擇在一個div

Question

我想讓SELECT放棄它從這個強制給我的HTML值。

從它看起來像我到達正確的地方在頁面上，而是試圖檢查，如果我在那裏，如果= SELECT沒有返回正確的事情...

可以在控制檯誰能幫助...

感謝和問候

<div id="Select1" class="dingbats_form_entry"> 
    <div class="dingbats_form_vertical_panel"> 
     <div> 
      <div class="dingbats_form_label dingbats_form_label_top">Select1 </div> 
      <div class="dingbats_form_field list_container" style="width: 100px;"> 
       <select class="gwt-ListBox dingbats_form_field_bottom" style="width: 135px;"> 
        <option value="1">1</option> 
        <option value="2">2</option> 
        <option value="3">3</option> 
        <option value="4">4</option> 
        <option value="5">5</option> 
       </select> 
      </div> 
     </div> 
    </div> 
</div> 

我有我的代碼

<script> 
function isRealValue(obj) { 
    return obj && obj !== "null" && obj !== "undefined"; 
} 

function getValue(ddl) { 

    try { 
     var obj = document.getElementById(ddl); 
     if (isRealValue(obj)) { 
      var lvl1 = obj.children; 
      console.log(lvl1); 
      var lvl2 = lvl1[0].children; 
      console.log(lvl2); 
      var lvl3 = lvl2[0].children; 
      console.log(lvl3); 
      var lvl4 = lvl3[1].children; 
      console.log(lvl4); 
      if (lvl4.tagName == 'SELECT') { 
       alert("FOUND IT!!"); 
      } 
      try { 
       var val = obj.options[obj.selectedIndex].value; 
      } catch (err) { 
       window.alert("var val = obj.options[obj.selectedIndex].value " + err.message); 
      } 
      window.alert("myFunction: after Sel val: Indx" + ddl + " " + val); 
      document.getElementById("demo").innerHTML = val; 
     } else { 
      window.alert("obj is not a real object: " + ddl + " " + obj); 
     } 
    } catch (err) { 
     window.alert("var obj = document.getElementById(ddl) " + err.message); 
    } 
} 

if (document.getElementById("Select1")) { 
    document.getElementById("Select1").addEventListener("change", function() { 
     getValue("Select1"); 
    }); 
} else { 
    window.alert("Select1 not found"); 
} 
</script> 

Answer 1

將id屬性添加到您選擇的標籤。

<select class="gwt-ListBox dingbats_form_field_bottom" style="width: 135px;" id="myTag"> 

而獲得的價值就在JS如下：

var value = myTag.options[myTag.selectedIndex].value; 

Answer 2

你應該有：

if (lvl4[0].tagName == 'SELECT') { 
    alert("FOUND IT!!"); 
} 

然後：

var val = lvl4[0].options[lvl4[0].selectedIndex].value; 

由於obj是你的div不是SELECT

Answer 3

你並不遙遠。使用getElementsByTagName()來簡化它並在每個階段添加檢查以避免不必要的try/catch。以下代碼未經測試。

function getValue(ddl) { 
    var el = document.getElementById(ddl); 
    if (el) { 
     var selects = el.getElementsByTagName("select"); 
     if (selects.length > 0) { 
      return selects[0]; 
      if (select.selectedIndex >= 0) { 
       return select.value; 
      } 
     } 
    } 
    return null; 
} 

Answer 4

var myDiv = document.getElementById('Select1'); 
var myVal = myDiv.getElementsByTagName('select')[0].value; 
alert(myVal); 

Demo

Answer 5

不是要拼命使用選擇API。既然你知道父div的ID（所有元素支持選擇API），似乎要警惕錯誤的，可以考慮：

var div = document.getElementById('Select1'); 
if (div) { 
    var value = div.querySelector('select.dingbats_form_field_bottom').value; 
} 

它選擇基於類值中的一個

，或者你可以同時使用：

var value = div.querySelector('select.gwt-ListBox.dingbats_form_field_bottom').value; 

關於：

> return obj && obj !== "null" && obj !== "undefined"; 

如果OBJ null或未定義，它會返回false，其他兩個比較將ñ經過測試。 getElementById只返回單個DOM元素或null，所以如果它返回null只有第一個測試會運行，它將返回false。

如果第一個測試返回真（即的getElementById返回一個DOM元素），那麼第二兩個比較將始終返回true，因爲的getElementById永遠不能返回一個字符串，當然不會返回任何弦'未定義'或'空'。

所以這個函數很好用，但不是特別有用。

在的getValue功能，你應該擺脫在try..catch塊的（他們幾乎從來沒有在JavaScript中必需的，如果你認爲你需要的時候，你幾乎總是錯誤的）。考慮替代：

function getValue(ddl) { 
    var obj = document.getElementById(ddl); 

    if (obj) { 
     // do stuff with obj 
    } 

關於：

 try { 
      var val = obj.options[obj.selectedIndex].value; 
     } catch (err) { 

是完全無用的。如果obj是一個DOM元素，您將只能到達該行。如果你是不確定的，如果它是一個選擇，並希望得到它的價值，你可以這樣做：

var val = obj.tagName.toLowerCase() == 'select'? obj.value : null; 

所以，如果這是一個選擇，你會得到它的價值，這可能是「」（空字符串），如果沒有選項如果它不是select，則選擇null。但是，如果您使用選擇器API（或其他人建議的getElementsByTagName），那麼您知道如果獲得元素，它必須是select。