JSFiddle - React, Tailwind, and code Playground

by Helmut Granda

HTML

<script src="https://www.ni.com/niassets/jquery/js/jquery.min.js"></script>
<script src="https://www.ni.com/niassets/jquery/js/jquery-migrate-1.2.1.min.js"></script>
<script src="https://www.ni.com/niassets/jquery/jqueryui/js/jquery-ui.min.js"></script>
<script src="https://www.ni.com/niassets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.ni.com/niassets/bootstrap/css/bootstrap.min.css">
<script src="https://www.ni.com/niassets/ni.min.js"></script>
<link rel="stylesheet" href="https://www.ni.com/niassets/jquery/jqueryui/css/jquery-ui.min.css">
<link rel="stylesheet" href="https://www.ni.com/niassets/ni.min.css">
<div class="col-xs-12 col-sm-6 left">
  <form>
    <div class="form-group">
      <div class="form-group">
        <select id="ni-single-select_1" class="ni-custom-select" name="Custom Select Name 1 ">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>

        <select id="ni-single-select_2" class="ni-custom-select" name="Custom Select Name 2">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>


        <select id="ni-single-select_3" class="ni-custom-select ni-select-secondary-copy" name="Select Options 1">
                <option disabled>Option S1</option>
                <option>Option S2</option>
                <option>Option S3</option>
            </select>


      </div>
    </div>
  </form>
</div>

<div id="output">
  <div class="name">
  </div>
  <div class="value">
  </div>
</div>

JavaScript

var handleSelectChange = function(e) {
  $("#output .name").text("<Select> Element Name: " + e.target.name)
  $("#output .value").text("<Option> Element Value: " + e.target.value)
}

$(document).ready(function(e) {

  NI.forms.initializeNIForm();

  $('#ni-single-select_1').on('change', handleSelectChange);
  $('#ni-single-select_2').on('change', handleSelectChange);
  $('#ni-single-select_3').on('change', handleSelectChange);

});