Question

1出发＆amp;到达

            <fielset class="col-sm-6">
                <label for="FDestination" >From</label>
                <select name="Location" id = "Location" onchange="checkforblank()"  >
                     <option value = "Please Select" >Please Select </option>
                    <option value="Newport">Newport</option>
                    <option value="Mahdi">London</option>
                    <option value="Cardiff">Cardiff</option>
                    <option value="Cilo">Brazil </option>
                </select>



            <fielset class="col-sm-6">
                <label for="FDestination">To</label>
                <select name="LocationTo" id = "LocationTo" onchange="checkforblank()">
                    <option value = "Please Select">Please Select </option>
                    <option value="Cardiff">Cardiff</option>
                    <option value="Mahdi">London</option>
                    <option value="Newport">Newport</option>
                    <option value="Cilo">Brazil</option>
                </select>

<script>

  function checkforblank() {

    var location = document.getElementById('Location');
    var invalidFrom = location.value == "Please Select";
    var locationTo = document.getElementById('LocationTo');
    var InvalidTo = locationTo.value == "Please Select";

    if (invalidFrom || InvalidTo) {
        alert('Please enter first name');
        location.className = 'error';
        InvalidTo.className = 'error'; 
    }
    else {
        location.className = '';
    }

    return !invalid;
}


</script>


.error {
    border: solid 5px #FF0
}

当用户在任一框中选择错误选项（“请选择”）时，我希望所选选项的边框变为彩色。现在发生的是，当我点击提交时，它会显示警告，然后几秒钟，颜色出现在一个框中，另一个框显示为空白，然后它就会消失。

当用户在任一框中选择“请选择”选项时，我希望错误显示在该框中，例如如果两个方框都有“请选择”，则两个方框都突出显示，或者如果一个方框有“请选择”而另一个方框有效，则只突出显示错误选项的一个方框。此外，当在警告框中单击“确定”时，框将保持突出显示，直到更改为有效选项。

Answer 1

我要做的第一件事就是将fielset固定为fieldset。

其次，我会为它们添加结束标记，就像这样;

<fieldset class="col-sm-6">
    <label for="Location">From</label>
    <select name="Location" id="Location" onchange="checkforblank()">
        <option value="Please Select">Please Select</option>
        <option value="Newport">Newport</option>
        <option value="Mahdi">London</option>
        <option value="Cardiff">Cardiff</option>
        <option value="Cilo">Brazil</option>
    </select>
</fieldset>
<fieldset class="col-sm-6">
    <label for="LocationTo">To</label>
    <select name="LocationTo" id="LocationTo" onchange="checkforblank()">
        <option value="Please Select">Please Select</option>
        <option value="Cardiff">Cardiff</option>
        <option value="Mahdi">London</option>
        <option value="Newport">Newport</option>
        <option value="Cilo">Brazil</option>
    </select>
</fieldset>

之后，你没有指定使用jQuery是否是一个选项，所以这个答案取决于答案，因为它使用jQuery。

$('#Location, #LocationTo').change(function(e) {
    var fromVal   = $('#Location').val(),
        toVal     = $('#LocationTo').val(),
        borderCol = '';

    if (fromVal == "Please Select" || toVal == "Please Select") {
        borderCol = 'red';
    } else {
        borderCol = 'black';
    }

    $('select[id="Location"],select[id="LocationTo"]').parent().css({
        'border-color' : borderCol
    });
});

链接到小提琴

http://jsfiddle.net/MrMarlow/eg8k4vL7/

如果使用jQuery是一个选项，请像这样包含它

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

修改 ::修正标签to属性以指向相应的ID。

Answer 2

这是解决您的问题的JavaScript / JQuery代码（无论何时两个目标都匹配，边框变为红色，因为您无法从A点移动到A点，它没有任何意义）。

<强>代码：

var index_one;
var index_two;

    $('#Location, #LocationTo').change(function (e) {

        index_one = $("#Location")[0].selectedIndex;
        index_two = $("#LocationTo")[0].selectedIndex;
    });
    $("#submit").click(function () {
        if ($("#Location>option").eq(index_one).text() == $("#LocationTo>option").eq(index_two).text()) {
            $('#Location, #LocationTo').css("border-color", "red");
        } else {
            $('#Location, #LocationTo').css("border-color", "black");
        }
    });

小提琴示例： http://jsfiddle.net/eugensunic/eg8k4vL7/1/

此外，如果你想处理一个没有给出值的输入的可能性，你可以添加这两个额外的if

else if($("#Location>option").eq(index_one).text() =="Please Select")
    {
        alert ("Select an option");
    }
      else if($("#LocationTo>option").eq(index_one).text() =="Please Select")
    {
        alert ("Select an option");
    }

而不是.text（）可以使用.val（）函数，这在这种情况下更合适。

要调用上面的代码，请将其放在标记之间

<head>
<script src="jquery-1.11.3.min.js"></script> //jquery lib, must include
<script>
//the above code
<script>
</head>

显示错误时如何着色边框？

2 个答案: