我如何分割选择框选项的值，并使用jquery或javascript在两个不同的输入字段中传递它？

Question

这是我的代码：

$(".dropdowncitymenu").change(function () {
    $("#sCity").val($(this).val());
    $("#sRegion").val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="font-size:12px;margin-bottom:20px;">City Field
<input placeholder="CITY" class="input-text" type="text" id="sCity" />
</div>
<div style="font-size:12px">Region Field
<input placeholder="REGION" class="input-text" type="text" id="sRegion"/>
</div>

<div style="margin-top:20px;width:100%;display:block;">
<select id="dropdowncities" class="dropdowncitymenu">
<option value="">Select a Location...</option>
<option value="Los Angeles (California)">Los Angeles (California)</option>
<option value="Miami (Florida)">Miami (Florida)</option>
</select>

</div>

我如何使用jquery甚至是平面javascript来实现，所以当我从选择框中选择一个位置时，将城市相应地传递到城市输入字段中，并将该区域传递到地区输入字段中？

Answer 1

最简单的方法是用一个字符分隔value属性中的城市/州，然后您可以split()创建一个数组。然后，您可以将结果数组的元素设置为文本字段的值。在下面的示例中，我使用,作为分隔字符，但是只要在值本身中不使用它，任何东西都将起作用。试试这个：

$(".dropdowncitymenu").change(function() {
  var location = $(this).val().split(',');
  $("#sCity").val(location[0]);
  $("#sRegion").val(location[1]);
});

#container {
  margin-top: 20px;
  width: 100%;
  display: block;
}

#city {
  font-size: 12px;
  margin-bottom: 20px;
}

#region {
  font-size: 12px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="city">City Field
  <input placeholder="CITY" class="input-text" type="text" id="sCity" />
</div>
<div id="region">Region Field
  <input placeholder="REGION" class="input-text" type="text" id="sRegion" />
</div>
<div id="container">
  <select id="dropdowncities" class="dropdowncitymenu">
    <option value="">Select a Location...</option>
    <option value="Los Angeles,California">Los Angeles (California)</option>
    <option value="Miami,Florida">Miami (Florida)</option>
  </select>
</div>

还请注意，我将CSS规则放入了外部样式表中。您应尽可能避免使用内联样式。