JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<div id="div1">
    <select id="select1">
        <option disabled="disabled" selected="selected">Select an Option</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
    </select>
    <div>
        <label>Selection: </label>
        <label id="lbl1"></label>
    </div>
</div>
<div id="div2">
    <div><a class="btn" id="btnAdd">Add</a></div>
    <div><a class="btn" id="btnRemove">Remove</a></div>
</div>
<div id="div3">
    <select id="select2" multiple="multiple"></select>
</div>

CSS

body { padding: 20px 0 0 20px; }
#div1 { float: left; width: 35%; }
#div2 { float: left; width: 20%; }
#div3 { float: left; width: 45%; }
#select1 { margin-bottom: 20px; }
#select2 { width: 150px; }
.btn {
	-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background-color: #ededed;
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
	text-indent: 0;
    margin-top: 5px;
    padding-top: 2px;
    cursor: pointer;
	border: 1px solid #dcdcdc;
	display: inline-block;
	color: #777777;
	font-weight: bold;
	font-style: normal;
	height: 25px;
    width: 70px;
	text-decoration: none;
	text-align: center;
	text-shadow: 1px 1px 0px #ffffff;
}
.btn:hover {
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background-color: #dfdfdf;
}.btn:active {
	position: relative;
	top: 1px;
}

JavaScript

$(document).ready(function() {
    $('#select1').change(function() {
        $('#lbl1').html($(this).val());
    });
    
    $('#btnAdd').click(function() {
        alert('test');
        if ($('#lbl1').html() == "") { return; }
        
        if (!$("#mySelect option:selected").length) {
            $("#select2 option[value='3']").attr('selected', 'selected');
        } else {
            alert('test');
        }
        
        if ($('#select2 > :selected').length == 0) {
            alert('test');
            if $('#lbl1').html() != "") {
                
            } else {
                alert('Select an option');
            }
        } else if ($('#select2 > option').length >= 1) {
            
        }
    });
    
    $('#btnRemove').click(function() {
        
    });
});