Question

用于申请表格中的城市名称的选择框

<select id="city" class="custom-select form-control" name="jobman-field-7[]">
    <option value="" selected></option>
    <option value="Other">Other Please Specify</option>
    <option value="Lahore">Lahore</option>
    <option value="Karachi">Karachi</option>
    <option value="Islamabad">Islamabad</option>
</select>

输入字段显示从

上方的选择框中选择“其他”时

<div class="form-group" id="other-city">
    <label>Enter your city here</label>
    <input name="other-city" value="" type="text" class="form-control">
</div>

Javascript切换字段

$(document).ready(function () {
    toggleFields();
    $("#city").change(function () {
        toggleFields();
    });
});

function toggleFields() {
    if ($("#city").val() == 'Other') {
        $("#other-city").show();
    } else {
        $("#other-city").hide();
    }
}

Answer 1

我猜你的方法看起来并不重要。您可以从数据库中检索选择框中的选项，附加用户输入作为选项不会使您的新数据反映在数据库中。最好尝试触发ajax调用，以便在提交表单时将数据插入数据库表中的city列。这可能是解决您的需求的一种方式，因此下次当用户访问页面时，将检索新结果并再次显示在选择框中。

Answer 2

注意：我没有将保存添加到db部分;希望你能解决这个问题; 我专注于将值从输入框传递到下拉列表;

请查看这是否对您有所帮助

<!DOCTYPE html>
<html>
<body>
<head>
<meta charset="utf-8">
<title></title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="city-form" onsubmit="return addCitytoDropDown()" method="POST">
  <div class="form-group" id="other-city">
    <label>Enter your city here</label>
    <input name="other-city" type="text" class="form-control" id="inputBox">
  </div>
</form>

<select id="city" class="custom-select form-control" name="jobman-field-7[]">
  <option value="PickCity" selected>Pick a City</option>
  <option value="Other">Other Please Specify</option>
  <option value="Lahore">Lahore</option>
  <option value="Karachi">Karachi</option>
  <option value="Islamabad">Islamabad</option>
</select>

<script type="text/javascript">
  function addCitytoDropDown(){
    var x = document.getElementById("city");
    var option = document.createElement("option");
    var newCity = document.getElementById("inputBox").value;
    option.text = newCity;
    option.selected = true;
    x.add(option);
    return false;
  }
</script>
</body>
</html>

Answer 3

//我需要这样的东西，然后选择新城市我们只能在添加时选择一个城市吗？

<select multiple id="city">
<option value="PickCity"></option>
<option value="Other">Other Please Specify</option>
<option value="Lahore">Lahore</option>
<option value="Karachi">Karachi</option>
<option value="Islamabad">Islamabad</option>
</select>

<input type="text" id="other-city">

$().ready(function() {
 $('#other-city').change(function() {
 var option = new Option($('#other-city').val(), "value");
 $('#city option:selected').append(option);
});
});

将值从输入字段传递到选择框选项

3 个答案: