javascript - Choices-js - programmatically change the selected value - Stack Overflow

admin管理员组

文章数量:1392081

I am using Choices-js to create a custom select element. The user can either use the select dropdown or some buttons to select their choice. On click of the button, I would like for the select dropdown to automatically take the value that the button is passing. The way I normally do this with a standard select element, selectEle.value = 'val';, doesn't seem to be working. I tried to dispatch a change event to see if that might trigger the value to change, but that doesn't seem to work either.

const standardSel = document.getElementById('standard');
const choicesSel = document.getElementById('choices');

choices = new Choices(choicesSel, {
  searchEnabled: false
});

document.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let selectEle = e.target.closest('.container').querySelector('select');
    // Set the value of the select box
    selectEle.value = 'ipsum';
    
    // Trigger change event
    selectEle.dispatchEvent(new Event('change'));
  }
});

select, .choices {
  display:block;
  width:200px;
  margin-bottom:15px!important;
}
  .choices__inner {
    min-height:initial!important;
  }

.container {
  display:block;
  margin-top:30px;
}

<link rel="stylesheet" href=".js/10.2.0/choices.min.css">

<div class="container">
  <select id="standard">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>

<div class="container">
  <select id="choices">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>


<script src=".js/10.2.0/choices.min.js"></script>

I am using Choices-js to create a custom select element. The user can either use the select dropdown or some buttons to select their choice. On click of the button, I would like for the select dropdown to automatically take the value that the button is passing. The way I normally do this with a standard select element, selectEle.value = 'val';, doesn't seem to be working. I tried to dispatch a change event to see if that might trigger the value to change, but that doesn't seem to work either.

const standardSel = document.getElementById('standard');
const choicesSel = document.getElementById('choices');

choices = new Choices(choicesSel, {
  searchEnabled: false
});

document.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let selectEle = e.target.closest('.container').querySelector('select');
    // Set the value of the select box
    selectEle.value = 'ipsum';
    
    // Trigger change event
    selectEle.dispatchEvent(new Event('change'));
  }
});

select, .choices {
  display:block;
  width:200px;
  margin-bottom:15px!important;
}
  .choices__inner {
    min-height:initial!important;
  }

.container {
  display:block;
  margin-top:30px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/choices.js/10.2.0/choices.min.css">

<div class="container">
  <select id="standard">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>

<div class="container">
  <select id="choices">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>


<script src="https://cdnjs.cloudflare./ajax/libs/choices.js/10.2.0/choices.min.js"></script>

• javascript
• choices.js

Share Improve this question Follow asked Aug 15, 2023 at 21:58 user13286user13286 3,09599 gold badges5353 silver badges115115 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You have to reference the choice's variable and not the select itself.

Then you can use setValue or setChoiceByValue on that object.

setValue has to be an array of something but setChoiceByValue can be the string itself. gitHub docs

choices.setValue(['ipsum']);

or

choices.setChoiceByValue('ipsum');

I also made a tweak to the variables, so that you could easily use it on multiple selects.

const standardSel = document.getElementById('standard');
const choicesSel = document.getElementById('choices');

const choiceSelects = {
  "choices" : new Choices(choicesSel, {searchEnabled: false}),
  "standard" : new Choices(standardSel, {searchEnabled: false})
};

document.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {
    let selectEle = e.target.closest('.container').querySelector('select');
    
    //choices.setValue(['ipsum']); or
    choiceSelects[selectEle.id].setChoiceByValue('ipsum');
  }
});

select, .choices {
  display:block;
  width:200px;
  margin-bottom:15px!important;
}
  .choices__inner {
    min-height:initial!important;
  }

.container {
  display:block;
  margin-top:30px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/choices.js/10.2.0/choices.min.css">

<div class="container">
  <select id="standard">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>

<div class="container">
  <select id="choices">
    <option value="">--Select One--</option>
    <option value="lorem">Lorem</option>
    <option value="ipsum">Ipsum</option>
    <option valule="dolor">Dolor</option>
  </select>

  <button>Select "Ipsum"</button>
</div>


<script src="https://cdnjs.cloudflare./ajax/libs/choices.js/10.2.0/choices.min.js"></script>

本文标签： javascriptChoicesjsprogrammatically change the selected valueStack Overflow