JSFiddle - React, Tailwind, and code Playground

by master1991

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-row">
	<div class="form-group col-md-3">
	  <label for="clientCode">car</label>
	  <select class="form-control selectpicker" name="clientCode" id="clientCode" data-live-search="true" onchange="selClient(this)">
		 <option data-cnid="A" value="A">A</option>
		 <option data-cnid="B" value="B">B</option>
		 <option data-cnid="C" value="C">C</option>
	  </select>
	</div>
	<div class="form-group col-md-2">
	  <label for="agreements">sits</label>
	  <select class="form-control selectpicker" name="agreements" id="agreements" data-live-search="true" onchange="selAgreement(this)">
		 <option data-cna="1" value="1">1</option>
		 <option data-cna="2" value="2">2</option>
		 <option data-cna="3" value="3">3</option>
	  </select>
	</div>
</div>
<div id="dataForm"></div>

<script>
function selClient(val) {

  var val = val.value;
  var val = encodeURI(val);

  var agreements = $('#agreements option:selected').attr('data-cna');
  var agr = '';
  if (agreements !== undefined){
    var agr = '&agreements='+agreements;
  }

  //$('#dataForm').load('/pages/prepare/return_form.php?clientCode='+val+''+agr);
  $('#dataForm').text('/pages/prepare/return_form.php?clientCode='+val+''+agr+'');

}

function selAgreement(val) {

  var val = val.value;
  var val = encodeURI(val);

  var clientCode = $('#clientCode option:selected').attr('data-cnid');

  var cli = '';
  if (clientCode !== undefined){
    var cli = '&clientCode='+clientCode;
  }

  //$('#dataForm').load('/pages/prepare/return_form.php?agreements='+val+''+cli);
  $('#dataForm').text('/pages/prepare/return_form.php?agreements='+val+''+cli+'');

}


</script>