How to obtain value in AngularJS or JavaScript from

Question

I am struggling to select the value when the customer selected the option, I tried with pure JS with document.querySelector() but for some reason it does not show what is the option that the customer did selected the reason from the reasonList, I was wondering what is the best solution or the code in angularJS that automatically can show the selected value from the option also it's in pure AngularJS 1.5 so I'm not an expert with this framework, to make clear what I need to do is:

1) When the customer selected the reason from the form 2) I need to obtain or to select what was the reason that the customer selected to create a "alert" tooltip that it's the right reason

but for the 2nd I tried with the var control = document.querySelector('select[ng-model="contactForm.reason"]'); but this is not the correct one because it shows this: [![querySelector()][1]][1]

so I tried with this one to create the id to select easily:

<select
required="required"
class="form-control form-control-sm"
id="id-info">
{% for category, reasons in reasonList %}
    <optgroup label="{{ category }}">
    {% for key, reason in reasons %}
    <option value="{{ key }}" id="showMe">{{ reason.name }}</option>
    {% endfor %}
    </optgroup>
{% endfor %}
</select>

using this code that I thought it's a good idea, but

var elem = document.getElementById("id-info");

  elem.onchange = function(){
    let hiddenDiv = document.getElementById("showMae");
    console.log(hiddenDiv);
  };

it "works" because it returns this value:

<option value="1" id="showMe">¿Dónde está mi pedido?</option>

but at the same time... it's wrong... because if the customer changes the option to other one the result is still the same with this one <option value="1" id="showMe">¿Dónde está mi pedido?</option>

so... I need those "best solutions" for

1) it returns the exact value not the complete element: <option value="1" id="showMe">¿Dónde está mi pedido?</option> it should return only "¿Dónde está mi pedido?"

2) it should change the value to the one that the customer selected... because all the time is <option value="1" id="showMe">¿Dónde está mi pedido?</option>

The next code is where I can set the reason list and all:

function fillReasonOptions(reasonList) {
    //---------------REASON Options -----------
    console.log(reasonList);
    //---------------END REASON Options -----------
    angular.forEach(reasonList, function(value, key) {
    angular.forEach(value, function(value, key) {
        this.reasonList[key] = value;
    });
    });
}

function reasonValidationOrder(selectedReason) {
    if (
    selectedReason &&
    this.reasonList[selectedReason].orderNumberRequired
    ) {
    return true;
    }

    return false;
}

In the html file:

      <select
        required="required"
        class="form-control form-control-sm"
        ng-model="contactForm.reason"
        id="id-info">
        {% for category, reasons in reasonList %}
          <optgroup label="{{ category }}">
            {% for key, reason in reasons %}
            <option value="{{ key }}" id="showMe">{{ reason.name }}</option>
            {% endfor %}
          </optgroup>
        {% endfor %}
      </select>

The cause by you use the same option id "showMe" in select... If you want to get the selected value option from select element, pls ref: https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — Vu.N, Oct 31 '18 at 06:27

score 1 · Answer 1 · answered Oct 31 '18 at 03:08

Please update:

Change id="showMe" --> id="{{key}}"

<select
            required="required"
            class="form-control form-control-sm"
            ng-model="contactForm.reason"
            id="id-info">
            {% for category, reasons in reasonList %}
              <optgroup label="{{ category }}">
                {% for key, reason in reasons %}
                <option value="{{ key }}" id="{{ key }}">{{ reason.name }}</option>
                {% endfor %}
              </optgroup>
            {% endfor %}
          </select>

In event onchange you can use jquery get item selected

var elem = document.getElementById("id-info");

elem.onchange = function(){
 //let hiddenDiv = document.getElementById("showMe");
 let hiddenDiv = $(this);
 console.log(hiddenDiv);
};

How to obtain value in AngularJS or JavaScript from

1 Answers1