Problem with get value from dropdown with JS code

Hi,
i have a strange problem with my form.
I have more dropdown, the first populated from database. If i want to get text value through JS code, i do:[pre]var el = document.getElementById('categoria');
var categoria= el.options[el.selectedIndex].innerHTML;[/pre]
​
and it works, because the html code is:

<option value="35">Acquisti di Gruppo</option>

My second dropdown is similar to the Dynamic Dropdown example (ie a dropdown that populates a second dropdown)
The logic of the dropdown works, but if I go to getthe dropdown value through JS it does not work, I always recover the id and not text. The reason is that the dropdown html is as follows:

<option value = "64" class = "addition"> 64 </ option>

How can is possible?
The link is:
http://www.condominiosereno.it/index.php?option=com_chronoforms6&chronoform=form-fornitore-copy
and the dropdown field is : Comune
In Read Data, i have correctly, as fields to retrieve,
Data.idProvincia ->key[br]Data.nomeComune -> value
​
Thanks and regards
Daniele

Hi Daniele,
​
That is because - to JavaScript - the drop-down value is the id - the 'value' attribute. See this StackOverFlow answer for a way to get the label using jQuery.
​
Bob

Thanks Bob, i see. i 've tried:

comune =  jQuery('#comune option:selected').text();

but it doesn't work, i get always the ID.
I attach a printscreen about page's html.[file=10369]dropdown.PNG[/file]
​
I have to get the text "Avellino" , not the Id.
​
Thank you
Regards

Hi,
any news?
thanks in advance
​
Regards
Daniele

Hi Daniele,
​
The text of the value is in the HTML twice - you should be able to read one of these with your JavaScript.

<div class=" fields" id="area_fields_56">
  <div class="field  twelve wide required">
    <label for="comune">Comune</label>
    <div class="search selection ui dropdown">
      <select data-validationrules=". . ." data-validate="comune-main" data-events=". . ." data-autocomplete="1" data-url=". . ." name="comune" id="comune" data-mincharacters="3" type="select">
        <option value="2" class="addition">2</option></select>
      </select>
      <i class="dropdown icon"></i>
      <input class="search" autocomplete="off" tabindex="0">
      <div class="text">Alagna Valsesia</div>
      <div class="menu transition hidden" tabindex="-1">
        <div class="item" data-value="1">Ala di Stura</div>
        <div class="item active selected" data-value="2">Alagna Valsesia</div>
        <div class="item" data-value="9">Alassio</div>
        <div class="item" data-value="18">Alagna</div>
        <div class="item" data-value="22">Ala</div>
        <div class="item" data-value="25">Alano di Piave</div>
        <div class="item" data-value="60">Alatri</div>
        <div class="item" data-value="68">Alanno</div>
      </div>
    </div>
    <small class="field-desc">inserisci almeno 3 caratteri</small>
  </div>
  <div class="field  four wide required">
    <label for="provincia">Provincia</label>
    <input name="provincia" value="Vercelli" readonly="true" ='readonly="true" '="" . . . placeholder="" id="provincia" type="text">

Bob

Hi Bob,
thanks for your reply but doesn't work.
By reading the html code, you would use this code[pre]
jQuery ('# common option: selected'). text ()[br][/pre]
to retrieve the dropdown text or another identifier than "#comune" ?
​
Perhaps using this code i should get id(2) because the html code is:
​

<select data-validationrules=". . ." data-validate="comune-main" data-events=". . ." data-autocomplete="1" data-url=". . ." name="comune" id="comune" data-mincharacters="3" type="select">        

<option value="2" class="addition">2</options>

You can check also here:
https://jsfiddle.net/aa7b65c3/2/ using library jQuery 3.3.1
​
​
Thanks and regards
[br]​
Daniele

Hi Bob,
i solved using this JS code
​

 jQuery('#area_fields_56 .text').text();

I hope it can help someone🙂
​
Last question, i think it's a bug:
​
http://www.condominiosereno.it/index.php?option=com_chronoforms6&chronoform=form-fornitore-copy
​
in dropdown "Comuni" please search a city, when you select one and refresh the dropdown, the previous textarea field (Servizi Offerti) become a Rich Text Editor (although it was already set in the settings). However, this behavior does not occur for the textarea field "Note"
​
How is possible?
regards