Question

我有使用div的自定义组合框，如何在点击组合框中获取值？

function selected_combobox(input) {
    $('#combobox').hide(); 
}

<div id="combobox" style="" onclick="selected_combobox(this);" >
    <div>item 1 (i do not want to use onclick on each items)</div>
    <div>item 2</div>
</div>

Answer 1

它在您的父元素中使用内联onclick javascript无法工作，因为当您单击它时，您将得到整个元素（父div）作为结果。一种解决方案是使用event delegation：

＆＃13;

// Get the element, add a click listener.
document.getElementById("combobox").addEventListener("click", function(e) {
  // e.target is the clicked element!
  // If it was a div item
  if (e.target && e.target.nodeName === "DIV") {
    //prints the text of the clicked element
    console.log(e.target.innerText);
  }
});

＆＃13;

<div id="combobox">
  <div>item 1 (i do not want to use onclick on each items)</div>
  <div>item 2</div>
</div>

＆＃13;

Answer 2

您可以使用事件目标，也可以使用jQuery的委托事件，这些事件不会向所有div添加事件。只有一个点击事件添加到父级。

＆＃13;

$("#combobox").on("click", "div", function(e) {
    console.log($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="combobox" style="" onclick="selected_combobox(this);" >
    <div>item 1 (i do not want to use onclick on each items)</div>
    <div>item 2</div>
</div>

＆＃13;

Answer 3

<div id="combobox" style="" onclick="selected_combobox(this);" >
    <div>item 1 (i do not want to use onclick on each items)</div>
    <div>item 2</div>
</div>

根据您的标记，最好将selected类添加到所选项目中。然后，只要您想要检索该值，请查找该类并获取值：）

$(function() {
    $("#combobox div").click(function() {
          $("#combobox div").removeClass("selected");
          $(this).addClass("selected");         
          $(this).text(); // will give the value
    }); 
    // Now whenever you want to get the value then

     function getValueOfCombo() {
         return $("#combobox div.selected").text();
     }
});

在这种方法中，您可以随时获取组合框的值。在其他appraoches中，只有点击该元素才能获得该值。

Answer 4

您可以使用以下方式获取子女：

$("#combobox").children();

如果你想要你可以使用的html /文字：

$("#combobox").html() // or $("#combobox").text()

文档：http://api.jquery.com/children/

编辑：将此代码放入回调处理函数中。

编辑：如果您想要孩子（已点击）文字，请使用：

$("#combobox").on("click", "div", function(){
    console.log($(this).text()); // or .html()
});

[你可能不需要这个处理函数]

如何获取所选项目值？

4 个答案: