dynamic popup options menus and how to grab the options value from a given menu

Question

I am trying to design a simple way to create (small/simple) dynamic options menus where, later, if one or some of them are clicked on and a value is selected/changed, I have a way of retrieving the current value of that menu... my 1 given is that I have to access each value through the parent div's id.

More precisely: I have an array of div ids, in each of these divs is a dynamically created (dom) options menu (when the div is clicked on the menu appears, I already have this click popup event working) and I want to grab the value using the parent div id.

1.) Is this how you would go about making the function?

function createMenu() {
    let div_ = document.createElement("div");
    div_.id = "d_popup";
    let select = document.createElement("SELECT");
    select.addEventListener("click", function(){grabsValueUsingParentDivsId()} );

    for (let i = 1; i < 4; i++) { //create some options...
        let op = document.createElement("option");
        op.text = i;
        op.value = i;
        select.add(op);
    }
}

2.) How to a get a menu's value (I want 1) using a parent div's id.

<h1 id="title"></h1>
<div id="parent">
        <select>
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
</div>
<script> //I want to grab the value from a parent node
    document.getElementById("title").innerHTML = document.getElementById("parent").firstChild.value; 
</script>

3.) Final question, if I had a div in a div in a div:

<div id="div1">
   <div> 
       <div> someText
       </div>
   </div>
</div>

How do I grab the innerHTML from the innermost div? This didn't work for me:

let text = document.getElementById("div1").firstChild.firstChild.innerHTML;

Thanks for any help.

Samuel Leiton · Accepted Answer · 2018-10-31T06:40:21.187

I would recommend using jquery, it is very useful.

0: Get values or Text

$(document).ready(function(){

    $('select').on('change',function(){

        var optionText = $("select option:selected").text();
        var optionVal = $("select option:selected").val();

        alert("Selected Option Text: "+optionText);
    });

});

1: Create Menu

 var arr = [
        {val : 1, text: 'One'},
        {val : 2, text: 'Two'},
        {val : 3, text: 'Three'},
        {val : 4, text: 'four'}
        ];

        $('<div/>').attr('id','div1').appendTo('body'); ;
       
        var sel = $('<select>').attr('id','parent').appendTo('#div1');

        $(arr).each(function() {
        sel.append($("<option>").attr('value',this.val).text(this.text));
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can change body by the #id .class or type where you need to put the menu

1.1 : function click menu:

$(document).ready(function(){
      $('select').on('click', function(){grabsValueUsingParentDivsId()} );
    });

2: get a menu's firts value or selected

    var selectValue = $("select").children('option:first').val();
    $("#title").html(selectValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1 id="title"></h1>
<div id="parent">
        <select>
          <option value="1" selected>1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
</div>

You can use option:selected, to get the value or text of the selected option with a change()

3: div in a div in a div:

here you have to be careful, given to use .children() is slower than .find() ref: Jquery - .children().children() vs .find()

var divText = $('#div1').children().children().text();
alert(divText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div1">
   <div> 
       <div> someText
       </div>
   </div>
</div>

dynamic popup options menus and how to grab the options value from a given menu

1 Answers1