JavaScript在两个Divs内获取选择值

Question

在我的项目中，我从JavaScript中的选择中选择了一个分为两个Divs，我必须获得文本或值(。

<div class="col-lg-3 col-xs-6" id="div1">
      <div class="form-group" id="divTtype">
          <label>Templte Type:</label>
          <select class="form-control" id="ftype">
              <option value="..All">..All</option>
              <option value="Functional">Functional</option>
              <option value="Non Functional">Non Functional</option>
          </select>
        </div>
 </div>

我尝试此代码：

function GetElementInsideContainer(containerID, childID) {
    var elm = document.getElementById(childID);
    var parent = elm ? elm.parentNode : {};
    return (parent.id && parent.id === containerID) ? elm : {};
}

但是当我尝试时：

GetElementInsideContainer(divType, ftype).text;

"未定义"返回给我。

如何获得我的选择值？

非常感谢

Answer 1

实际上您的html代码"divttype"中有一个错字，您打算写Divtype

<div class="col-lg-3 col-xs-6" id="div1">
    <div class="form-group" id="divType">
        <label>Templte Type:</label>
        <select class="form-control" id="ftype">
            <option value="..All">..All</option>
            <option value="Functional">Functional</option>
            <option value="Non Functional">Non Functional</option>
        </select>
    </div>
</div>

您还需要使用textContent属性而不是text

最后，请使用"id"调用该函数，否则您正在调用未定义变量divType和ftype

console.log(GetElementInsideContainer("divType", "ftype"));

---

这肯定会解决您的当前问题，尽管请参阅Raphael答案以获取更好的方法。

Answer 2

因为文本不存在于htmlelement中。您必须这样做：

GetElementInsideContainer(divType, ftype).textContent;

这是文档。

Answer 3

将字符串作为参数时应使用引号：

GetElementInsideContainer('divType', 'ftype').text;

Answer 4

就像克里希纳(Krishna(在上面的评论中所说的那样，您应该可以做：

var select = document.getElementById('ftype')
var val = select.options[select.selectedIndex].value

您不必引用父节点。

Answer 5

使用 textContent 并以 String 的形式传递ID，否则将其作为变量

其次，您有ID divttype ，然后通过divtype

function GetElementInsideContainer(containerID, childID) {
  var elm = document.getElementById(childID);
  var parent = elm ? elm.parentNode : {};
  return (parent.id && parent.id === containerID) ? elm : {};
}

var a = GetElementInsideContainer("divType", "ftype").textContent;
console.log(a)

<div class="col-lg-3 col-xs-6" id="div1">
  <div class="form-group" id="divType">
    <label>Templte Type:</label>
    <select class="form-control" id="ftype">
      <option value="..All">..All</option>
      <option value="Functional">Functional</option>
      <option value="Non Functional">Non Functional</option>
    </select>
  </div>
</div>

Answer 6

似乎工作正常。

<div class="col-lg-3 col-xs-6" id="div1">
      <div class="form-group" id="divTtype">
          <label>Templte Type:</label>
          <select class="form-control" id="ftype">
              <option value="..All">..All</option>
              <option value="Functional">Functional</option>
              <option value="Non Functional">Non Functional</option>
          </select>
        </div>
 </div>
 <button onclick="getSelected(GetElementInsideContainer('divTtype', 'ftype'))">Get Selected Value</button>
 <script>
 function getSelected(objEl)
 {
 	alert(objEl.options[objEl.selectedIndex].text);
 }
 
function GetElementInsideContainer(containerID, childID) {
    var elm = document.getElementById(childID);
    var parent = elm ? elm.parentNode : {};
    return (parent.id && parent.id === containerID) ? elm : {};
}
 </script>

Answer 7

您是否需要选择的选择值？

我完成了该片段，并获得了选择的HTML。使用此片段，您可以获得SELECT

的值

<div class="col-lg-3 col-xs-6" id="div1">
      <div class="form-group" id="divTtype">
          <label>Templte Type:</label>
          <select class="form-control" id="ftype">
              <option value="..All">..All</option>
              <option value="Functional">Functional</option>
              <option value="Non Functional">Non Functional</option>
          </select>
        </div>
 </div>

function GetElementInsideContainer( childID) {
    var elm = document.getElementById(childID);
    console.log(elm.value)
    return elm.value;
}
GetElementInsideContainer('ftype');

我认为也许您通过论点不正确ID