How can I create a select option that I can select from an array in the Javascript?

Question

<div class="row" id="gas_analyte1">
              <div class="col-md-3">
                Gas Analyte 1<br>
                <%= f.select :gas_analyte, @Gases, {include_blank: 'Select Gas', size:15},{style: "width:150px;",class: "gas_search"} %><br>              
              </div>
</div>

@Gases is an array of gases such as carbon monoxide that is created in the controller.

In Javascript, if a user clicks on the add button, I would like to add another select box to the input page so I have this so far

$('#gas_analyte_btn').click(function(){
    $('#gas_analytes').append('<div id="gas_analyte'+(i).toString()+'" class="row"><div class="col-md-3">Gas Analyte '+(i).toString()+'<br><input size="15" type="text" name="search[gas_analyte'+(i).toString()+']" id="search_gas_analyte'+(i).toString()+'" />
});

The problem I having is that the javascript created a Textarea and not a select option. How can I create a select option that I can select from @Gases in the Javascript?

Thank you

If you want to use select option you should rather use select and option tags — sobczi
– sobczi, Commented Nov 18, 2019 at 2:47
You could also check out the cocoon gem. It helps with adding fields to a form dynamically. github.com/nathanvda/cocoon — Int'l Man Of Coding Mystery
– Int'l Man Of Coding Mystery, Commented Nov 18, 2019 at 8:24

max · Accepted Answer · 2019-11-18 12:53:02Z

$('#gas_analyte_btn').click(function(){
  let value = $(this).siblings('input[type="text"]').val();
  if (value.length > 0) {
    $('#myselect').append($('<option>'+value+'</option>'))
                  .val(value); // selects the new value
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row" id="gas_analyte1">
  <div class="col-md-3">
    <select id="myselect">
      <option>Helium</option>
      <option>Hydrogen</option>
      <option>Oxygen</option>
    </select>
  </div>
  <div class="add_option">
    <input type="text"/>
    <button id="gas_analyte_btn">Add Option</button>
  </div>
</div>

Also you can programatically create HTML elements and fragments using jQuery or just the vanilla DOM instead of that completely unreadable string concatenation concoction:

var id = i.toString();
var $in = $('<input>').attr({ 
  name: 'search[gas_analyte'+i+']',
  id: 'search_gas_analyte'+i
});
# ...

Saravanakumar Thevar · Accepted Answer · 2020-07-29 00:35:20Z

1

I cant understand your question clearly but I think this is what you are looking for . Giving you an example of which you can safely extrapolate. Cheers.

<html>
<head>
</head>
<body>
<select id="sltGas" onchange="alert(this.options[this.selectedIndex].text);">
  <option>Hello</option>
</select>
<input type="text" id="txtGas" name="txtGas"><input type="button" name="btnAdd" id="addBtn" value="ADD" onclick="addGas();">
<script type="text/javascript">
var sltGas = document.getElementById("sltGas");
alert(sltGas.options[sltGas.selectedIndex].text);

function addGas()
{
 var txtGas = document.getElementById("txtGas");
 var option = document.createElement("option"); 
 option.text = txtGas.value; 
 option.value = 2;
 sltGas.add(option) 
}
</script>
</body>
</html>

edited Jul 29, 2020 at 0:35

answered Nov 18, 2019 at 3:08

Saravanakumar Thevar

717 bronze badges

Collectives™ on Stack Overflow

How can I create a select option that I can select from an array in the Javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related