fast/forms/select/option-selecting.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../js/resources/js-test-pre.js"></script>
</head>
<body>
<form style="visibility: hidden">
    <select name=menuListBoxNoSize>
        <option disabled>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <select name=menuListBoxSize1 size=1>
        <option disabled>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <select name=menuListBoxSize3 size=3>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <select multiple name=multipleListBox>
        <option>X</option>
        <option>Y</option>
        <option>Z</option>
    </select>
</form>
<script>
description("Test the behavior of selecting and deselecting options in &lt;select&gt; elements.");

var menuListBoxNoSize = document.forms[0].elements.menuListBoxNoSize;
debug("ListBox with no size attribute specified.");
shouldBe("menuListBoxNoSize.selectedIndex", "1");
shouldBe("menuListBoxNoSize.options[1].selected", "true");
debug("Setting menuListBoxNoSize.options[2].selected = true");
menuListBoxNoSize.options[2].selected = true;
debug("Setting menuListBoxNoSize.options[2].selected = false");
menuListBoxNoSize.options[2].selected = false;
shouldBe("menuListBoxNoSize.selectedIndex", "1");
shouldBe("menuListBoxNoSize.options[1].selected", "true");


var menuListBoxSize1 = document.forms[0].elements.menuListBoxSize1;
debug("\nListBox with size=1 attribute.");
shouldBe("menuListBoxSize1.selectedIndex", "1");
shouldBe("menuListBoxSize1.options[1].selected", "true");
debug("Setting menuListBoxSize1.options[2].selected = true");
menuListBoxSize1.options[2].selected = true;
debug("Setting menuListBoxSize1.options[2].selected = false");
menuListBoxSize1.options[2].selected = false;
shouldBe("menuListBoxSize1.selectedIndex", "1");
shouldBe("menuListBoxSize1.options[1].selected", "true");


var menuListBoxSize3 = document.forms[0].elements.menuListBoxSize3;
debug("\nListBox with size=3 attribute.");
shouldBe("menuListBoxSize3.selectedIndex", "-1");
debug("Setting menuListBoxSize3.options[1].selected = true");
menuListBoxSize3.options[1].selected = true;
debug("Setting menuListBoxSize3.options[1].selected = false");
menuListBoxSize3.options[1].selected = false;
shouldBe("menuListBoxSize3.selectedIndex", "-1");
shouldBe("menuListBoxSize3.options[0].selected", "false");
shouldBe("menuListBoxSize3.options[1].selected", "false");

debug("Setting menuListBoxSize3.selectedIndex = 1");
menuListBoxSize3.selectedIndex = 1;
shouldBe("menuListBoxSize3.selectedIndex", "1");
shouldBe("menuListBoxSize3.options[1].selected", "true");

menuListBoxSize3.selectedIndex = -1;
debug("Setting menuListBoxSize3.selectedIndex = -1");
shouldBe("menuListBoxSize3.selectedIndex", "-1");
shouldBe("menuListBoxSize3.options[0].selected", "false");
shouldBe("menuListBoxSize3.options[1].selected", "false");


var multipleListBox = document.forms[0].elements.multipleListBox;
debug("\nListBox with multiple attribute.");
shouldBe("multipleListBox.selectedIndex", "-1");
debug("Setting multipleListBox.options[1].selected = true");
multipleListBox.options[1].selected = true;
debug("Setting multipleListBox.options[1].selected = false");
multipleListBox.options[1].selected = false;
shouldBe("multipleListBox.selectedIndex", "-1");
shouldBe("multipleListBox.options[0].selected", "false");
shouldBe("multipleListBox.options[1].selected", "false");
debug("Setting multipleListBox.options[1].selected = true");
multipleListBox.options[1].selected = true;
debug("Setting multipleListBox.options[2].selected = true");
multipleListBox.options[2].selected = true;
shouldBe("multipleListBox.options[1].selected", "true");
shouldBe("multipleListBox.options[2].selected", "true");

</script>
<script src="../../js/resources/js-test-post.js"></script>
</body>
</html>