Question 188047 in Javascript Question posted in
A very good W3school tutorial can be found here.

select value change via javascript

function sync_animations(abc) {
  abc.dataset.chosen = abc.value;
  for (let a of document.getAnimations()) {
    a.startTime = 0;
  }
}
select[data-chosen] {
  outline-offset: 2px;
  outline: 12px solid;
}

select[data-chosen='green'] {
  outline-color: green;
}

select[data-chosen='red'] {
  outline-color: red;
}

select[data-chosen='grey'] {
  outline-color: grey;
}

select[data-chosen='blinkgreen'] {
  outline-color: green;
  animation: blink 2s;
  animation-iteration-count: infinite;
}

select[data-chosen='blinkred'] {
  outline-color: red;
  animation: blink 2s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  100% {
    outline-offset: 2px;
    outline: 12px solid;
    outline-color: transparent;
  }
}
<select onchange="sync_animations(this)" id="select_nonsdwan_37">
  <option value="blinkgreen">Running (Fine)</option>
  <option value="blinkred">Running (Issues)</option>
  <option value="green">Completed (Fine)</option>
  <option value="red">Completed (Issues)</option>
  <option value="grey" selected="selected">Yet to start</option>
</select>

I can see the border around the select when I change the value of select via the UI.

enter image description here

But when I set the value via javascript, it does not show the animation.
enter image description here

Tags:

2

Answers


  1. 0

    The change event only triggers when there are user-initiated changes. Modifications made through JavaScript in the background, which we call manipulation, do not trigger the change event.

    When manipulating the value attribute of your <select> element using JavaScript, you should call your sync_animations() function and pass the select element to it. See the example below.

    function sync_animations(abc) {
  abc.dataset.chosen = abc.value;
  for (let a of document.getAnimations()) {
    a.startTime = 0;
  }
}

function manipulate(value) {
  const selectElement = document.getElementById("select_nonsdwan_37");
  selectElement.value = value;
  sync_animations(selectElement);
}
    select, button {
  display: block;
  margin-bottom: 16px;
}

button {
  margin: 4px;
}

select[data-chosen] {
  outline-offset: 2px;
  outline: 12px solid;
}

select[data-chosen='green'] {
  outline-color: green;
}

select[data-chosen='red'] {
  outline-color: red;
}

select[data-chosen='grey'] {
  outline-color: grey;
}

select[data-chosen='blinkgreen'] {
  outline-color: green;
  animation: blink 2s;
  animation-iteration-count: infinite;
}

select[data-chosen='blinkred'] {
  outline-color: red;
  animation: blink 2s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  100% {
    outline-offset: 2px;
    outline: 12px solid;
    outline-color: transparent;
  }
}
    <select onchange="sync_animations(this)" id="select_nonsdwan_37">
  <option value="blinkgreen">Running (Fine)</option>
  <option value="blinkred">Running (Issues)</option>
  <option value="green">Completed (Fine)</option>
  <option value="red">Completed (Issues)</option>
  <option value="grey" selected="selected">Yet to start</option>
</select>

<button onclick="manipulate('blinkgreen')">Manipulate - blinkgreen</button>
<button onclick="manipulate('blinkred')">Manipulate - blinkred</button>
<button onclick="manipulate('green')">Manipulate - green</button>
<button onclick="manipulate('grey')">Manipulate - grey</button>
    Login or Signup to reply.
  2. 0

    Adding the attribute change works properly.

    function sync_animations(abc) {
  abc.dataset.chosen = abc.value;
  for (let a of document.getAnimations()) {
    a.startTime = 0;
  }
}

function changeSelect(){
  let select = document.querySelector('#select_nonsdwan_37');
  select.value = 'blinkred';
  select.attributes['data-chosen'].value = 'blinkred';
}
    select[data-chosen] {
  outline-offset: 2px;
  outline: 12px solid;
}

select[data-chosen='green'] {
  outline-color: green;
}

select[data-chosen='red'] {
  outline-color: red;
}

select[data-chosen='grey'] {
  outline-color: grey;
}

select[data-chosen='blinkgreen'] {
  outline-color: green;
  animation: blink 2s;
  animation-iteration-count: infinite;
}

select[data-chosen='blinkred'] {
  outline-color: red;
  animation: blink 2s;
  animation-iteration-count: infinite;
}

@keyframes blink {
  100% {
    outline-offset: 2px;
    outline: 12px solid;
    outline-color: transparent;
  }
}
    <select onchange="sync_animations(this)" id="select_nonsdwan_37">
  <option value="blinkgreen">Running (Fine)</option>
  <option value="blinkred">Running (Issues)</option>
  <option value="green">Completed (Fine)</option>
  <option value="red">Completed (Issues)</option>
  <option value="grey" selected="selected">Yet to start</option>
</select>

<button onclick="changeSelect()">change to red</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search