JSFiddle - React, Tailwind, and code Playground

by Rupali Soni

HTML

<p class="inline-label">
	<label class="label">Positive/Negative</label> &nbsp;&nbsp;&nbsp; 
	<input id="publishRadio" type="radio" name="monType" value="Positive"
		checked="checked" /> Positive &nbsp; 
	<input type="radio"	name="monType" value="Negative" /> Negative
</p>
<p class="inline-label">
	<input type="hidden" value="" /> <label class="label">Select Monitoring</label>
	<select style="width: 150px; padding: 5px;" id="monValue">
			<option value="">Test Value</option>
	</select>
</p>

JavaScript

$(document).off('change','input:radio[name="monType"]').on('change','input:radio[name="monType"]',function(){

    var type = $(this).val();

    if (type != "") {
        $.post('/echo/html/?q=1', {
            type : $(this).val(),
            ajax : 'true'
        }, function(data) {
            var htmlMon = '';
            $('#monValue').html(htmlMon);
            htmlMon += '<option value="54">Good</option><option value="55">Better</option>';

            $('#monValue').html(htmlMon);
            //$('#monValue').trigger('update-select-list').change();
        },
        'json');
    } else {
        var emptyHtml = '';

        $('#monValue').html(emptyHtml);
        //$('#monValue').trigger('update-select-list').change();
   }
 });