JSFiddle - React, Tailwind, and code Playground

by faissal_aboullait

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<table>

  <tr>
    <td>
      Selection 1 :
    </td>
    <td>
      <select name="select1" class="ch" id="id1">
        <option value="">Nothing</option>
        <option value="val1">val1</option>
        <option value="val2">val2</option>
        <option value="val3">val3</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>
      Selection 2 :
    </td>
    <td>
      <select name="select2" class="ch" id="id2">
        <option value="">Nothing</option>
        <option value="val1">sel1</option>
        <option value="val2">sel2</option>
        <option value="val3">sel3</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>
      Selection 3 :
    </td>
    <td>
      <select name="select" class="ch" id="country">
        <option value="">Nothing</option>
        <option value="val1">Maroc</option>
        <option value="val2">USA</option>
        <option value="val3">Egypt</option>
      </select>
    </td>
  </tr>
  <tr id="options_insert">

  </tr>
</table>

JavaScript

$(document).on('change', "select#country", function() {
  var $optionsElement = $('#options_insert');
  var $selectCountry = $("select#country").val();

  if ($selectCountry === '') {
    $optionsElement.html("");
  } else {
    $optionsElement.html("<td>Options :</td>" +
      "<br />" +
      "<td>" +
      "<div>" +
      "<label>" +
      "<input type='checkbox' class='ch' id='option1' name='options' class='ch' value='1'>Option1</label>" +
      "</div>" +
      "<div>" +
      "<label>" +
      "<input type='checkbox' id='option2' name='options' class='ch' value='2'>Option2</label>" +
      "</div>" +
      "</td>");
  }
});

$(document).on('change', '.ch', function() {
  var $select1 = $("select#id1").val();
  var $select2 = $("select#id2").val();
  var $selectCountry = $("select#country").val();
  var $options = $("input[name=options]:checked").map(function() {
    return this.value;
  }).get();

  alert("select1=" + $select1 + " select2=" + $select2 + " Country=" + $selectCountry + " options=" + $options.join(","));
});