Updating Dropdown list

In order to update the design of the default drop down list, we can use the script to generate a fake model of the drop down list, which can be customized according to our requirements

The script code used for this is :

Code for drop down
<div class="custom-payment-method-select">
		<div class="payment-register-register-form-controls-group" data-validation="control-group">
			<div class="payment-register-register-form-controls selectField" data-validation="control">
	<select id="sel1" class="order-wizard-paymentmethod-selector-module-button-group" data-action="select-payment-method" placeholder="Payment Methods">  
		
		<option value="Payment Methods" class="order-wizard-paymentmethod-selector-module-button"  disabled selected >Payment Methods</option>
		{{#each activeModules}}
		<option class="order-wizard-paymentmethod-selector-module-button" {{#if isSelected}}selected{{/if}} data-type="{{type}}" value="{{type}}">{{name}}</option>
			{{/each}}
	</select>
	
	</div>
	</div>
    </div>

	

Script code used to make fake drop down

<script>
	$(document).ready(function () { // use jQuery lib

		//jQuery('#register-firstname').on('click', function () { jQuery('#isdentist').val('true') });

		var $select = $("select"),
			$speed = "fast";

		$select.each(function () {
			// Allow default browser styling
			// if ($(this).hasClass("default")) {
			// 	return;
			// }
			$(this).css("display", "none");
			// Generate fancy select box
			$(this).after('<ul class="fancy-select" style="display: none;"></ul>');
			var $current = $(this),
				$fancy = $current.next(".fancy-select");

			// Get options
			var $options = $(this).find("option");
			// $options = $options.splice(1);
			$options.each(function (index) {
				var $val = $(this).val(),
					$text = $(this).text(),
					$disabled = "";
				// Add class for disabled options
				if ($(this).attr("disabled")) $disabled = " disabled";

				if (index == 0) {
					// Create clickable object from first option
					$fancy.before('<span class="selected" data-val="' + $val + '">' + $text + "</span>");
				}
				// Load all options into fake dropdown
				if (index != 0) {
					$fancy.append('<li class="fancy-option'  + $disabled + '" data-val="' + $val + '"  data-type="' + $val + '">' + $text + "</li>");
				}
				// Update fake select box if this option is selected
				if ($(this).attr("selected")) {
					$(this).parent("select").val($val);
					$(this).parent("select").next(".selected").attr("data-val", $val).text($text);


				}
			});
		});

		// Show/hide options on click
		$(".selected").click(function (target) {
			$(this).addClass("active");
			var $box = $(this).next(".fancy-select"),
				$target = target,
				$object = $(this);

			// Prevent multiple open select boxes
			if ($box.is(":visible")) {
				$box.slideUp($speed);
				return;
			} else {
				$(".fancy-select").slideUp();
				$box.slideDown($speed);
			}

			// Click outside select box closes it
			$target.stopPropagation();
			if ($box.css("display") !== "none") {

				$(document).click(function () {
					$('.selectField .selected').removeClass("active");
					$box.slideUp($speed);
				});
			}
		});

		// Make selection
		$(".fancy-option").click(function () {
			$(this).removeClass("active");
			var $val = $(this).attr("data-val"),
				$text = $(this).text(),
				$box = $(this).parent(".fancy-select"),
				$selected = $box.prev(".selected"),
				$disabled = $(this).hasClass("disabled");

			// Basic disabled option functionality
			if ($disabled) {
				return;
			}

			$box.slideUp($speed);

			// Update select object's value
			// and the fake box's "value"
			// $selected.prev("select").val($val);
			$selected.attr("data-val", $val).text($text);
			
			var em = $val; 
			console.log("em", em);
      
	   $("#sel1").val(em).change();
	
			// Get Output
			var $what = $("#what").val(),
				$when = $("#when").val();
			console.log($what);
		});
	});
	

</script>