получение события onClick для выбора и отображения изменения выбора в форме выбора html

Question

Цель: Использование события onClick для запуска функции. Функция предназначена для изменения значения и отображения выбранного значения в элементе <select> в форме HTML. Я понимаю, что .val применяет только значение.
Это фактически меняет выделенный текст на пустой.

Я пытался использовать .attr и применять выбранный атрибут, но он тоже не работает.

onClick, я хочу, чтобы значение изменилось на цвет, а также цвет для отображения в поле выбора. Если сработало раскрывающееся окно выбора, я по-прежнему хочу, чтобы можно было выбрать и другие варианты цвета.

Есть ли способ сделать это?

<script>
function changeColor(color) {
  $(".select-color").val("'" + color + "'");
}
</script>

ВЫБРАТЬ КОРОБКУ

<select class="select-color"><option value="">SELECT A COLOR</option><option value="BLACK">BLACK</option><option value="RED">RED</option></select>

ССЫЛКА

<a href="javascript:void(0)" onClick="changeColor('RED')">CHANGE TO RED</a>

Answer 1

Просто измените тело changeColor на это:

$(".select-color").val(color);

Вы не хотите или не нуждаетесь в тех дополнительных кавычках, которые вы включали вокруг значения.

Answer 2

Используйте приведенный ниже код для изменения значения выпадающего списка и цвета фона тела.

function changeColor (color) {$ (". Select-color"). Val (color); }

Answer 3

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function changeColor(color) {
  console.log(color);
  $(".select-color option[value=" + color + "]").prop('selected',true);
  
  ;
  
 
  
  
}
</script>
SELECT BOX

<select class="select-color">
<option value="">SELECT A COLOR</option>
<option value="BLACK">BLACK</option>
<option value="RED">RED</option>
</select>
LINK

<a href="javascript:void(0)" onClick="changeColor('RED')">CHANGE TO RED</a>

Answer 4

Допустим, мы хотим изменить цвет спины на красный, поэтому нам нужно использовать метод css, чтобы изменить цвет. Пожалуйста, найдите рабочий пример ниже:

function changeColor(color) {
  $(".select-color").val(color);
  $(".select-color").css("background-color", color);

}

 <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<select class="select-color">
  <option value="">SELECT A COLOR</option>
  <option value="BLACK">BLACK</option>
  <option value="RED">RED</option>
</select>

<a href="javascript:void(0)" onClick="changeColor('RED')">CHANGE TO RED</a>