Пользователь может вручную ввести пользовательское значение, когда выпадающий список не указан - PullRequest
Новая
       1

Пользователь может вручную ввести пользовательское значение, когда выпадающий список не указан

0 голосов
/ 01 июля 2018

Я хочу добавить параметр в раскрывающийся список, где пользователь может вручную вводить информацию, если один из параметров не применяется. Я сделал простой выпадающий список, с цветами в качестве примера. Последний ввод - Другой , однако я не знаю, как сделать это редактируемым, если пользователь выберет его. Есть идеи? Помощь очень ценится. 

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <style type="text/css">
    table,
    td,
    th {
      margin-left: auto;
      margin-right: auto
    }
    
    .display {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    p {
      text-align: center;
    }
    
    textarea {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  </style>
  <body>
    <table>
      <tr>
        <td>
          <select name="color" id="z4">
            <option value="" disabled selected>Color</option>
            <option value="red">Red</option>
            <option value="orange">Orange</option>
            <option value="yellow">Yellow</option>
            <option value="green">Green</option>
            <option value="purple">Purple</option>
            <option value="white">White</option>
            <option value="black">Black</option>
            <option value="gray">Gray</option>
            <option value="Other">Other</option>
          </select>
        </td>
      </tr>
    </table>
    <br>
    <div class="display">
      <button onclick="sentence()"> Submit </button>
    </div>
  </body>
</html>

1 Ответ

0 голосов
/ 01 июля 2018

Добавьте поле input и присоедините прослушиватель событий к полю select.
Если пользователь выбирает параметр Другой , отобразите поле input. Используйте значение из этого поля input, когда пользователь нажимает кнопку Submit . 

// select the necessary elements
var select = document.querySelector('#z4');
var other = document.querySelector('#other');
// use this flag to easily determine, whether the user selected the other option
var isOther = false;

// listen, when the user changes the select field
select.addEventListener('change', function () {
  // get the currently selected value of the select field
  var value = this.value;
  
  // if the user selected "Other", show the other input field
  if (value === 'Other') {    
    other.style.display = 'inline';
    isOther = true;
  
  // otherwise hide the other input field
  } else {
    other.style.display = 'none';
    isOther = false;
  }
});

// the function, that will be used upon submitting
function sentence() {
  // if the other input field is selected, get its value
  if (isOther) {
    console.log('other used:', other.value);
  } else {
    console.log('regular used');
  }
}
table,
td,
th {
  margin-left: auto;
  margin-right: auto
}

.display {
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  text-align: center;
}

textarea {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#other {
  display: none;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<table>
  <tr>
    <td>
      <select id="z4" name="color">
        <option value="" disabled selected>Color</option>
        <option value="red">Red</option>
        <option value="orange">Orange</option>
        <option value="yellow">Yellow</option>
        <option value="green">Green</option>
        <option value="purple">Purple</option>
        <option value="white">White</option>
        <option value="black">Black</option>
        <option value="gray">Gray</option>
        <option value="Other">Other</option>
      </select>      
      <input id="other" name="other" type="text" placeholder="Type other">
    </td>
  </tr>
</table>
<br>
<div class="display">  
  <button onclick="sentence()"> Submit </button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...