CODEWITHSUNDEEP
javascripthtml
AndrewRMillar
AndrewRMillar

Reputation: 662

I know part of the value of a select option, I would like set that option with JS?

I would like to set an option in a select element based on the substring which will be contained in one of the option values. I have a solution but it seems quite convoluted to me.

I get the values of the options and put them in an array, loop through the values and check if the value includes a string I am looking for when it does I set that value as the select value. There must be an easier way!

I get the values of the options in the following way.

// Get the select element where you can select a procinve with a pull-down
var provincePullDown = document.querySelector(".select-provincie");
// Array containing the values of the select options
var optArray = Array.from(provincePullDown.options);
var optArrayValues = [];
optArray.forEach(el => optArrayValues.push(el.value));

I then loop over the values looking with a likely substring.

// Loop over the values in the select options
optArrayValues.forEach(function (el) {
  // Look for the option containing the right province
  if (el.includes(selectedProvince)) {
    // Set the selected option from the select element
    provincePullDown.value = el;
  }
});

The option values look something like this sting (3) and the substring like this string.

I would like to know if there is an easier way as to me this seems an overly convoluted solution. And keeping maintenance in mind I would like an clear solution that I will still easily understand in 6 months.

The page is created by Drupal so I also control what html is outputted and the option values are inserted in the Drupal template. Let me also state that I am not a fan of jQuery even though the project does load jQuery by default.

Upvotes: 1

Views: 841

Answers (4)

Mamun
Mamun

Reputation: 68933

As querySelector() support any valid CSS selector, you can try with contains (*=) Attribute selector:

[attr*=value]

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

var selectedProvince = 'province';
document.querySelector(".select-provincie option[value*='"+selectedProvince+"']").selected = true;
<select class="select-provincie">
  <option value="prov-1">Province 1</option>
  <option value="prov-2">Province 2</option>
  <option value="province-test">Province 3</option>
  <option value="prov-3">Province 4</option>
</select>

You can also use Template Literals for cleaner syntax:

var selectedProvince = 'province';
document.querySelector(`.select-provincie option[value*='${selectedProvince}']`).selected = true;
<select class="select-provincie">
  <option value="prov-1">Province 1</option>
  <option value="prov-2">Province 2</option>
  <option value="province-test">Province 3</option>
  <option value="prov-3">Province 4</option>
</select>

Upvotes: 1

RobG
RobG

Reputation: 147513

You can use plain DOM methods with find and includes:

function updateOther(source) {
  let value = source.value;
  let sel = document.querySelector('.select-provincie');
  sel.selectedIndex = [].find.call(sel.options, opt => opt.value.includes(value)).index;
}
<select onchange='updateOther(this)'>
  <option value="1" selected>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<select class="select-provincie">
  <option value="province1" selected>Province 1</option>
  <option value="province2">Province 2</option>
  <option value="province3">Province 3</option>
  <option value="province4">Province 4</option>
</select>

But it's not fault tolerant: if a suitable value isn't found, it will throw an error (as do other answers). :-)

Upvotes: 1

Sam
Sam

Reputation: 1469

JQuery is interesting precisely when you want simplify solutions and ensure it is practical in terms of optimization. So I want to bring you a JQuery solution.

var selectedProvince = 'province3';
$(".select-provincie > option").each((index, elem) => {
if (elem.value == selectedProvince) {$(elem).attr('selected', true)};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="select_provincie">

<select class="select-provincie">
  <option value="province1">Province 1</option>
  <option value="province2">Province 2</option>
  <option value="province3">Province 3</option>
  <option value="province4">Province 4</option>
</select>

</div>

Upvotes: 0

Daniele Bolla
Daniele Bolla

Reputation: 49

You can directly point to the option value if the regext is just a simple contain

const optToSelect = document.querySelector('option[value*=${SUBSTRING}]');
document.querySelector("select").selectedIndex = optToSelect.index;

Upvotes: 1

Related Questions