Используйте параметр URL для предварительного выбора опции по метке, а не по значению

Question

Как я могу передать метку, а не параметр, чтобы предварительно выбрать javascript из выпадающего списка?

Например, допустим, URL-адрес - page.html? Option = name3

и в форме есть выбор, подобный этому

<select id="select-box">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
</select>

В этом примере разные Name3 и 3.

Какой javascript можно использовать для предварительного выбора опции, текстовое содержимое которой соответствует параметру URL выше?

Answer 1

Считать параметр запроса из URL текущей страницы: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

const optionParam = new URLSearchParams(window.location.search).get('option'); // "Name3"

и затем установите . Выберите value для опции, которая textContent соответствует

.

// const optionParam = new URLSearchParams(window.location.search).get('option');
const optionParam = "Name3"; // (PS: Use the above one instead, this is for demo)

const sel = document.getElementById("select-box");
const opt = [...sel.options].find(op => op.textContent===optionParam);
if (opt) sel.value = opt.value;

<select id="select-box">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
</select>

Answer 2

Вам нужно установить selectedIndex вашего элемента, используя JavaScript следующим образом. Сначала проанализируйте URL-адрес, чтобы получить желаемую опцию запроса. Вы можете использовать window.location API для получения URL-адреса и выполнения своих операций над ним. Затем выполните итерацию по каждому параметру элемента select и определите хорошее соответствие, используя некоторую логику.

Надеюсь, это поможет.

<select id="select-box">
  <option value="1">Name1</option>
  <option value="2">Name2</option>
  <option value="3">Name3</option>
  <option value="4">Name4</option>
</select>
<script>
   // to get option we use some parsing:
   function getOption(url) {
     var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
     if (queryString){
       var optionString = queryString.split('=')[1];
       // returns string for options if specified.
       return optionString;
     }
     // return null otherwise.
     return null;
   }
   var e = document.getElementById("select-box");
   // var o = getOption(window.location.href);
   // var o = getOption(document.url) // does not work for Firefox
   // replace this with one of the lines above for dynamic solution
   var o = getOption('page.html?option=name3');
   if(o) {
     for(var i=0; i<e.options.length; i++) {
       if(o === e.options[i].innerHTML.toLowerCase()){
        // be careful about case sensitivity and try to come up
        // with your own logic on how you validate this,
        document.getElementById("select-box").selectedIndex = i;
       }
     }
   }else {
    // if no option default to 0
    document.getElementById("select-box").selectedIndex = 0;
   }
</script>