CODEWITHSUNDEEP
javascriptjquery
user285594
user285594

Reputation:

How to get the selected item value?

I have this custom combobox using div, how do i get the values inside combobox on click?

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>

Upvotes: 0

Views: 98

Answers (4)

Alex Char
Alex Char

Reputation: 33218

It won't work using inline onclick javascript in your parent element cause when you click on it you get the entire element(parent div) as result. One solution is to use event delegation:

// 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);
  }
});
<div id="combobox">
  <div>item 1 (i do not want to use onclick on each items)</div>
  <div>item 2</div>
</div>

Upvotes: 2

Gaurang Tandon
Gaurang Tandon

Reputation: 6753

You can get the children divs using:

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

if you want the html/text you can use:

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

Docs: http://api.jquery.com/children/

EDIT: Put this code inside your callback handler function.

EDIT: If you want child's (which was clicked) text, use:

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

[You won't probably need the handler function for this]

Upvotes: -1

mohamedrias
mohamedrias

Reputation: 18566

<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>

As per your markup, It's better to add a selected class to the selected item. Then whenever you want to retrieve the value, look for that class and get the value :)

$(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();
     }
});

In this approach, you can get the value of the combo box at anytime. Else in other appraoches, you will get the value only on click of that element.

Upvotes: 0

epascarello
epascarello

Reputation: 207501

You can either use the event target, or utilize jQuery's delegated events which does NOT add events to all the divs. There is only one click event added to the parent. 

$("#combobox").on("click", "div", function(e) {
    console.log($(this).text());
});
<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>

Upvotes: 1

Related Questions