Question

我是一个“选择”：

<select class="date-select2" name="date">
    <option selected="selected" value="">All</option>
    <option value="11-2015">11-2015</option>
    <option value="10-2015">10-2015</option>
    <option value="09-2015">09-2015</option>
    <option value="07-2015">07-2015</option>
    <option value="06-2015">06-2015</option>
    <option value="04-2015">04-2015</option>
    <option value="03-2015">03-2015</option>
</select>

当我试图获得select的值时，

document.getElementsByClassName('date-select2')[0].value

它通常会返回Chrome中所选项目的值。在FF和Safari中，有时它会返回一个空字符串，当选择一个数值（而不是“全部”）。怎么处理呢？

Answer 1

我认为这可能会对您有所帮助：

<强> HTML

<select class="date-select2" name="date" onchange="myFunction(this.value)">
    <option selected="selected" value="">All</option>
    <option value="11-2015">11-2015</option>
    <option value="10-2015">10-2015</option>
    <option value="09-2015">09-2015</option>
    <option value="07-2015">07-2015</option>
    <option value="06-2015">06-2015</option>
    <option value="04-2015">04-2015</option>
    <option value="03-2015">03-2015</option>
</select>

<强>的JavaScript

function myFunction(curValue) {
    alert(curValue);
}

<强> Working : Fiddle

注意：还要记得在结束之前将JavaScript代码放在body内。

Answer 2

var select = document.querySelector('select.date-select2');

// add onchange handler 
select.onchange = function(){
var idx = select.selectedIndex;

var val = select.options[idx].value;
// if All is selected use text of option
  if(val=="")
   val = select.options[idx].textContent;

};

Answer 3

您可以尝试这种方式来获取所选项目：

$(".date-select2 option:selected").text();

选择具有空值

3 个答案: