Question

我有以下选择选项：

<select id='media' name='media'>
   <option value='1'>media1</option>
   <option value='2'>media2</option>
   <option value='3'>media3</option>
</select>

按照jquery代码显示所选值：

$(document).ready(function() {  
    $("#media").change(function() {
        var id = $(this).val();
        alert(id);
    });
});

问题是在第一次加载页面后，如果我选择Media1，它没有显示任何内容。如果我选择media2或media3，那么它正确显示其值。即使我在选择media2或media3后选择了media1，media1的值也会照常显示。也许这是由于在页面加载media1是默认选择的第一个选项的原因，并且当我首先选择相同的media1选项时，select选项的值保持不变（media1）。

如何解决这个问题？ I，E。即使我先选择第一个选项，它的价值也会显示出来。

Answer 1

当change的值发生变化时，select事件会触发（相当明显）。如果页面加载的值为1，则再次选择该值不会引发事件。

如果您不想要此行为，则需要添加另一个选项，该选项在加载时将是默认选项。像这样：

<select id='media' name='media'>
   <option value=''>Please select...</option>
   <option value='1'>media1</option>
   <option value='2'>media2</option>
   <option value='3'>media3</option>
</select>

这样做的副作用是您需要验证是否已经进行了有效选择。

$(document).ready(function() {  
    $("#media").change(function() {
        var id = $(this).val();
        if (id != '') {
            alert(id);
        }
    });
});

Answer 2

您可能想要使用keyup。您应该使用另一种通知用户的方法，因为使用警报并不漂亮。我想请注意，您不会在代码中对dataString执行任何操作。你的意思是在警报中使用它吗？

使用$("#media").keyup(function() {...});。

您可能需要将其与更改逻辑结合使用。请确保不要使用备用警报方法。您的代码可能如下所示：

var dataString = '';
var media = $("#media");
$(document).ready(function()
{
    //page has loaded
    dataString = getAlertValue(this);
    media.change(function()
    {
       dataString = getAlertValue(this);
       alert(id);
       return false;
    });

    media.click(function()
    {
       dataString = getAlertValue(this);
       alternateAlertMethod(id);
       return false;
    });
});

function getAlertValue(element){
    var id=$(this).val();
    var dataString = 'id='+ id;
    return dataString;
}

function alternateAlertMethod(id){
    console.log(id);
}

此外，有一个虚拟选项告诉用户选择一个选项可能是一个很好的选择。

Answer 3

添加属性：

autocomplete = "off"

到表单（或选择）元素，避免在浏览器缓存中进行数据记忆。

Answer 4

您可以在选择框的页面加载时触发更改事件。这样，只要说第一个项目在选择框中填充，它就会触发事件。

Ex：$（＆＃34; #select＆＃34;）。触发器（＆＃39;更改＆＃39;）;

在页面加载后，不从第一个选项中获取选定值

4 个答案: