Question

我需要知道是否已经选择了选择下拉列表中的两个选项，因此我可以获取文本并创建一个按钮，其中显示该文本。此时，按钮会在单击选项之前显示一些文本，但如果已关闭并且已选择选项，则不会再次显示。

如果有人回答了这个问题，请告诉我，我找不到任何可以帮助我的事。

这是我的代码：

＆＃13;

$(document).ready(function () {
  var valueFrom = $('#revenueFrom option:selected').text();
  var valueTo = $('#revenueTo option:selected').text();

  if ($('#revenueFrom option').data('clicked', true) && $('#revenueTo option').data('clicked', true)) {
    $('#annual-revenue-button').text("");
    $('#annual-revenue-button').append(valueFrom + "To:" + valueTo + "&ensp;" + "&times;");
    $('#annual-revenue-button').show('fast');
  };

});

$('.search-popup').click(function () {
  $(this).hide('fast');
});

＆＃13;

button{
    background-color:whitesmoke;
    border-radius: 20px;
    display:none;
}
button:hover{
    background-color:lightgray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="search-popup btn" id="annual-revenue-button" type="button"></button>


<form class="form-inline revenue">
  <div class="form-group">
    <label>Annual Revenue</label>
    <select name="revenueFrom" class="form-control" id="revenueFrom">
      <option value="" selected disabled>From:</option>
      <option value="0">$0</option>
      <option value="1">$500,000</option>
      <option value="2">$1 Million</option>
      <option value="3">$2.5 Million</option>
      <option value="4">$5 Million</option>
    </select>
    <select name="revenueTo" class="form-control to" id="revenueTo">
      <option value="" selected disabled>To:</option>
      <option value="0">$0</option>
      <option value="1">$500,000</option>
      <option value="2">$1 Million</option>
      <option value="3">$2.5 Million</option>
      <option value="4">$5 Million</option>
    </select>
  </div>
</form>

＆＃13;

Answer 1

您需要在Multiple之后添加[]并添加name=revenueFrom因此，在表单提交中传递包含所有元素的数组。

这篇文章也可能对你有用how to access multiple select array data in javascript

注意这个功能：

function getSelectedOptions(element) {
    // validate element
    if(!element || !element.options)
        return []; //or null?

    // return HTML5 implementation of selectedOptions instead.
    if (element.selectedOptions)
        return element.selectedOptions;

    // you are here because your browser doesn't have the HTML5 selectedOptions
    var opts = element.options;
    var selectedOptions = [];
    for(var i = 0; i < opts.length; i++) {
         if(opts[i].selected) {
             selectedOptions.push(opts[i]);
         }
    }
    return selectedOptions;
}

还可以创建一个事件监听器，在select上查找更改并在其他地方添加一个新元素，如果这是您需要的，如果您需要更具体的答案，请随时更新您的问题

Answer 2

您需要在python ... develop元素上设置.change()事件监听器当其中一个更改后，请检查这些select元素的值是否为空，然后显示您的按钮。

select

$(document).ready(function () {

  $('#revenueFrom, #revenueTo').change(function(){
    if ($('#revenueFrom').val() && $('#revenueTo').val()) {
      var valueFrom = $('#revenueFrom option:selected').text();
      var valueTo = $('#revenueTo option:selected').text();

      $('#annual-revenue-button').html("From: " + valueFrom + " To: " + valueTo + "&ensp;&times;").show('fast');
    };
  });

});

$('.search-popup').click(function () {
  $(this).hide('fast');
});

button{
    background-color:whitesmoke;
    border-radius: 20px;
    display:none;
}
button:hover{
    background-color:lightgray;
}

检查是否已选择两个选项

2 个答案: