here is a jquery script to get the color input changed on EDITED: selected option double click
added a function to apply selected color on the background of the same selection and un-select it to c the effect,
goodluck,
function createCommandField() {
var input = document.createElement('option');
input.style.marginTop = "1%";
input.textContent = "command";
input.name = 'Commands[]';
input.style.display = 'block'
input.style.boxShadow = 'inset 0px 1px 0px 0px #ffffff';
input.style.border = '1px solid #dcdcdc';
input.style.borderRadius = '6px';
input.style.height = "2%";
input.style.padding = '5px 30px';
input.style.fontFamily = "Arial";
input.style.fontWeight = "bold";
input.style.fontSize = "17px";
return input;
}
$(document).ready(function() {
var bgclr ='';
var parentopt = $('#pckrbg');
$('#commandslist').change(function() {
var crntslct = $('#commandslist').children('option:selected');
crntslct.dblclick(function() {
parentopt.click();
parentopt.change(function(){
bgclr = parentopt.val();
$('#commandslist').prop("selectedIndex", function(){
$(this).children('option:selected').css("background", bgclr); //set background
$(this).children('option:selected').prop("selected", false); //deselect option;
});
});
});
});
});
var select = document.getElementById('commandslist');
document.getElementById('addCommand').addEventListener('click', function(e) {
select.appendChild(createCommandField());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span><input type="color" value="#FFEE00" id="pckrbg" name="colorz" style="position:relative; display:none; float:left; margin-right:1rem; bottom:3px;"></span>
<form class="myformclass" style="font-family: sans-serif;font-size:20px;" id="myForm" onsubmit="return validateForm()">
<input class="addcommandbtn" type="button" id="addCommand" style="width: 6.5%;" value="+ Command">
<input class="addcommandbtn" type="button" id="removeCommand" style="width: 7.2%;" value="- Command" onclick="removeCommandFunc()">
<input class="savebtn" type="button" id="saveCommands" style="width: 4%; float: right;" value="Save" onclick="SaveToLocalStorage()">
<!-- Retrive Button <input class="Retrive" type="button" id="Callback" value="Retrive From LocalStorage" style="float:right;margin-right:3rem;" > -->
<select name="commandslist" id="commandslist" size="5%" style="width: 50%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px;"></select>
<select name="resplist" id="resplist" size="18%" style="height: 20%;width: 59%; display: block; border: 1px solid #dcdcdc; border-radius: 6px; margin-top: 5px; margin-left: 20%;"></select>
</form>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…