Как я могу предотвратить удаление этих параметров значения пользователем, когда они заполняют поле ввода

Question

При перезагрузке страницы показывает значение «SSS». Если я выберу параметр, значение каждого параметра появится, но эти параметры можно удалить. есть ли какой-либо вариант, который эти значения могут переключать, но не могут быть отредактированы / удалены пользователем?

$('select[name=filter]').change(function() {
    var input_field = $('input#ifield');
    switch ($(this).val()) {
        case 'A': input_field.val('AAAAAA'); break;
        case 'B': input_field.val('BBBBBB'); break;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="filter" name="filter">
    <option id="A" value="A">AA</option>
    <option id="B" value="B">BB</option>
</select>
<input id="ifield" value="SSS" type="text" />

Answer 1

Просто сделайте свой ввод скрытым и отобразите значение в каком-то общем теге c html.

html:

<select id="filter" name="filter">
    <option id="A" value="A">AA</option>
    <option id="B" value="B">BB</option>
</select>
<input type="hidden" id="ifield" value="SSS" type="text" />
<span id="selected_val" style="color: #fff;">NOT SELECTED</span>

js:

$('select[name=filter]').change(function() {
    var input_field = $('input#ifield');
    switch ($(this).val()) {
        case 'A': input_field.val('AAAAAA'); break;
        case 'B': input_field.val('BBBBBB'); break;
    }
        $('#selected_val').html(input_field.val())
});

https://jsfiddle.net/VladimirNT1/gup74h5r/2/

Answer 2

Вы можете проверить, соответствует ли значение строке в начале плюс любой строке, используя регулярное выражение:

var reg = new RegExp(yourString + '.*');

Для получения дополнительной информации об этом посещении: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Я создал этот фрагмент, чтобы продемонстрировать:

$(document).ready(function() {
  $('select[name=filter]').change(function() {
      var input_field = $('input#ifield');
      switch ($(this).val()) {
          case 'A':
              input_field.val('AAAAAA');
              break;
           case 'B':
               input_field.val('BBBBBB');
           break;
      }
  });

  $('#ifield').on('input', function() {
      var A = 'AAAAAA';
      var B = 'BBBBBB';

      var select_field = $('select[name=filter]').val();

      //create regular expression for A
      var regA = new RegExp(A + '.*');
      //create regular expression for B
      var regB = new RegExp(B + '.*');
      if (select_field == 'A') {
          //check if the string doesn't match with
          //.test()
          if (!(regA.test($(this).val()))) {
              //set the value to A
              $(this).val(A);
          }
      } else if(select_field == 'B') {
          if (!(regB.test($(this).val()))) {
              $(this).val(B);
          }
      }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="filter" name="filter">
    <option id="A" value="A">AA</option>
    <option id="B" value="B">BB</option>
    </select>
<input id="ifield" value="SSS" type="text" />