JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="dropdown no_userselect">
    <input type="hidden" name="where" value="" />
    <span class="color_orange">Where did you find us 1?</span>
    
    <div class="dropdown_options">
        <p data-value="facebook">Facebook</p>
        <p data-value="twitter">Twitter</p>
        <p data-value="youtube">YouTube</p>
        <p data-value="word-of-mouth">Word of mouth</p>
        <p data-value="magazine">Magazine</p>
        <p data-value="search-country">Search (Google, Yahoo!, Bing)</p>
        <p data-value="other-websites">Other websites</p>
        <p data-value="other">Other</p>
    </div>
</div>
    
    <div class="dropdown no_userselect">
        <input type="hidden" name="where" value="" />
        <span class="color_orange">Where did you find us 2?</span>
        
        <div class="dropdown_options">
            <p data-value="facebook">Facebook</p>
            <p data-value="twitter">Twitter</p>
            <p data-value="youtube">YouTube</p>
            <p data-value="word-of-mouth">Word of mouth</p>
            <p data-value="magazine">Magazine</p>
            <p data-value="search-country">Search (Google, Yahoo!, Bing)</p>
            <p data-value="other-websites">Other websites</p>
            <p data-value="other">Other</p>
        </div>
</div>

CSS

.dropdown {
border: solid 1px #777;
height: 15px;
padding: 10px;
width: 263px;
cursor: pointer;
position: relative;
color: #000;
line-height: 14px;
font-size: 13px;
background-image: url(../images/dropdown_btn.jpg);
background-position: 245px -1px;
background-repeat: no-repeat;
float: left;
margin-top: 10px;
}
.dropdown_active {
	z-index:2;
}


.dropdown_options {
	position: absolute;
	top: 35px;
	width: 283px;
	border: solid 1px #777;
	left: -1px;
	font-size:11px;
	display:none;
	background-color:#ccc;
}

.dropdown_options p {
	width: 273px !important;
	margin: 0 !important;
	padding:5px;
}

.dropdown_options p:hover,.dropdown_options p.selected {
	background-color:#333;
}


.no_userselect {
    
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
}
}

JavaScript

$('.dropdown').on('click',function(){
		
		$(this) .toggleClass('dropdown_active')
				.children('.dropdown_options')
				.toggle();

	});
	
	$('.dropdown_options p').on('click',function(){
		
		$(this).parent().children('.selected').removeClass('selected');
		var x_title = $(this).html();
        var x_value = $(this).data('value');
		$(this).addClass('selected').parent().parent().children('span').html(x_title);
        
		$(this).addClass('selected').parent().parent().children('input').val(x_value);

	});