Question

我有以下脚本：

<script type="text/javascript">
$(document).ready(function(){

$("#ProjModelChoose").change(function() {
    $("#ProjModelChooseCOM").attr("name","form" + $(this).val());
    $("input[name='buyid']").attr("value", $(this).val());
});

$("#ProjModelChoose2").change(function() {
    $("#ProjModelChooseOEM").attr("name","form" + $(this).val());
    $("input[name='buyid']").attr("value", $(this).val());
});

$(".atcButton").click(function() {
    if($("select option:selected").val("Choose Your Projector Model")) {
    event.preventDefault();
    alert("Please choose a projector model");
    }
    });
});
</script>

HTML：

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<span>Purchase today for: </span><h3 class="atcPrice">$192</h3>
<select name="chooseModelOEM" id="ProjModelChoose">
<option value="Choose Your Projector Model">Choose Your Projector Model</option>
<option value="126648">PLC-SU70</option>
<option value="126682">PLC-WXE45</option>
<option value="126684">PLC-WXE46</option>
<option value="126686">PLC-WXL46</option>
<option value="126717">PLC-XE40</option>
<option value="126719">PLC-XE45</option>
<option value="126795">PLC-XL40</option>
<option value="126797">PLC-XL45</option>
<option value="126998">PLC-XU73</option>
<option value="127000">PLC-XU74</option>
<option value="127006">PLC-XU83</option>
<option value="127008">PLC-XU84</option>
<option value="127010">PLC-XU86</option>
<option value="127012">PLC-XU87</option>
</select>
<form name="" action='someaction' method=post id="ProjModelChooseCOM" target="_blank"><input type='hidden' name='buyid' value=""><input type='hidden' name='c' value="1025622"><input type='hidden' name='n' value='5'><td class='text'><input name='add' id='add' size=4 value=1 class='qtyButton' border="0" ></td><td class='text'><input type="image" src="olp-atcbutbg.png" border='0' value='Add to Cart' alt='Add to Cart' class='atcButton'></td></form>
</tr>
</table>

好的，基本上当用户从下拉列表中进行选择时，我将所选选项中的值插入到表单中。这很好。但是如果用户没有做出选择（在“选择您的投影机型号”上留下下拉菜单）并尝试将产品添加到购物车，我希望它停止表单提交（它是动态的，所以它会尝试执行不管怎样的动作）并显示警告。我上面的代码既没有= /

Answer 1

试试这个：

$(".atcButton").click(function() {
    if($("select option:selected").val() === "Choose Your Projector Model") {
        alert("Please choose a projector model");
        return false;
    }
});

您可能还想将事件处理程序从$(".atcButton").click()更改为$("#ProjModelChooseCOM").submit()。

更新抱歉，我误解了这个问题。编辑以解决价值比较问题。

Answer 2

试试这个：

$(".atcButton").click(function(event) {
    if($("select option:selected").val() === "Choose Your Projector Model") {
        event.preventDefault();
        alert("Please choose a projector model");
        }
    });
});

我添加了“event”作为单击函数调用的匿名函数的参数。

更新：我更改了值比较代码。

Answer 3

$(".atcButton").click(function(event) {
    if($("select option:selected").index() == 0) {
    alert("Please choose a projector model");
        event.preventDefault();     
    }
});

试试这个。

jQuery：阻止默认表单操作并提醒用户

3 个答案: