Question

我正在使用国家/地区下拉过滤器进行搜索。这将允许用户在所选区域内进行搜索。

选择泰国＆＃39;从下拉列表，＆＃39;泰国+＆＃39;将被推送到搜索框，允许用户输入另一个形成

的关键字（例如食物）

＆＃39;泰国+食品＆＃39;。

由于技术限制，这是我创建搜索过滤器的唯一解决方法。我想知道当我按下输入时，我可以使所选区域文本不可见（泰国+）..＆＃39;泰国+＆＃39;是搜索结果的一部分。

我想要实现的目标：

用户选择＆＃39;泰国＆＃39;
泰国+＆＃39;被推送到文本框（用户不可见）**
用户类型＆＃39; Food＆＃39;在搜索框中
泰国+美食＆＃39;在搜索结果中

＆＃13;

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="testfloat">
    
    <select id="quantity">
        <option selected>Select Libraries</option>
        <option value="Albanian + ">Albanian</option>
        <option value="Singapore + ">Singapore</option>
        <option value="Malaysia + ">Malaysia</option>
        <option value="Germany + ">Germany</option>
        <option value="France + ">France</option>
        <option value="Thailand + ">Thailand</option>
    
    </select>

<script type="text/javascript">

$('#quantity').change(function(){
  var qty = $('#quantity').val();
  var total = qty;
  $("#ms-helperText").val(total);
});
</script>


<input type="text" id="ms-helperText">

＆＃13;

Answer 1

将两个值都转换为隐藏的表单元素：

＆＃13;

// Get all needed input elements
const $country = document.querySelector( '#country' );
const $quantity = document.querySelector( '#quantity' );
const $msHelperText = document.querySelector( '#ms-helperText' );

// Event handler
function inputChange() {
  const collection = [];
  $country.value && collection.push( $country.value );
  $quantity.value && collection.push( $quantity.value );
  
  // Only add + if both inputs have a value.
  $msHelperText.value = collection.join( ' + ' );
  console.log( 'Hidden element value: ', $msHelperText.value );
}
$country.addEventListener( 'input', inputChange );
$quantity.addEventListener( 'input', inputChange );

＆＃13;

<select id="country">
  <option value="" selected>Select Libraries</option>
  <option value="Albanian">Albanian</option>
  <option value="Singapore">Singapore</option>
  <option value="Malaysia">Malaysia</option>
  <option value="Germany">Germany</option>
  <option value="France">France</option>
  <option value="Thailand">Thailand</option>
</select>

<input type="text" id="quantity">

<!-- the new hidden form element, that will hold both values -->
<input type="hidden" id="ms-helperText">

＆＃13;

Answer 2

您可以尝试将该值附加到html

中的隐藏输入中

<input type="hidden" id="somehiddenvalue"></input>

Answer 3

不是将所选国家/地区放在输入中，而是将其存储在变量中并相应地进行更改。

这应该是你的代码：

＆＃13;

var searchedCountry = "";
$('#quantity').change(function() {
  searchedCountry = $('#quantity').val();
  $("#preview").html(searchedCountry + " " + $('#ms-helperText').val());
});

$('#ms-helperText').keyup(function() {
  $("#preview").html(searchedCountry + " " + $(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="testfloat">

  <select id="quantity">
        <option selected>Select Libraries</option>
        <option value="Albanian + ">Albanian</option>
        <option value="Singapore + ">Singapore</option>
        <option value="Malaysia + ">Malaysia</option>
        <option value="Germany + ">Germany</option>
        <option value="France + ">France</option>
        <option value="Thailand + ">Thailand</option>
    </select>
  <input type="text" id="ms-helperText">
  <br/>
  <div id="preview">

  </div>

＆＃13;

使文本输入看不见但有形

3 个答案: