JavaScript Tutorial/jQuery/Form Select
Содержание
30. Get all selected items from form select control
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).change();
});
</script>
</head>
<body>
<body>
<select name="sweets" multiple="multiple">
<option>A</option>
<option>B</option>
<option selected="selected">C</option>
<option>D</option>
<option>E</option>
</select>
<div></div>
</body>
</html>
30. Get multiple selected value
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function displayVals() {
var singleValues = $("#single").val();
$("p").html(singleValues.join(","));
}
$("select").change(displayVals);
});
</script>
</head>
<body>
<body>
<p></p>
<select id="single" multiple="multiple">
<option>Single</option>
<option>Single2</option>
<option>Single3</option>
</select>
</body>
</html>
30. Get selected items from form select control
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).trigger("change");
});
</script>
</head>
<body>
<select name="A" multiple="multiple">
<option>A</option>
<option selected="selected">B</option>
<option>C</option>
</select>
<div></div>
</body>
</html>
30. Get selected value from select
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function displayVals() {
var singleValues = $("#single").val();
$("p").html(singleValues);
}
$("select").change(displayVals);
});
</script>
</head>
<body>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
</body>
</html>
30. Select multiple select option
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<select id="single">
<option>1</option>
<option>2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
</body>
</html>
30. Select single select option
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1","check2", "radio1" ]);
});
</script>
<style>
.selected { color:red; }
.highlight { background:yellow; }
</style>
</head>
<body>
<body>
<select id="single">
<option>1</option>
<option>2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="r" value="radio1"/> radio1
<input type="radio" name="r" value="radio2"/> radio2
</body>
</html>
30. Set select option
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#single").val("Single2");
});
</script>
</head>
<body>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
</body>
</html>