[SELECT2] Hiểu submit trong javascript và nâng cấp sử dụng select 2, autocomplate (ok)
Ví dụ 1: sử dụng thông thường
C:\xampp\htdocs\autocomplete\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="content" class="container">
<form id="myForm" action="">
<select id="president" name="president">
<optgroup label="Dead">
<option value="1">George Washington</option>
<option value="2">John Adams</option>
<option value="3">Thomas Jefferson</option>
<option value="4">James Madison</option>
<option value="5">James Monroe</option>
<option value="6">John Quincy Adams</option>
<option value="7">Andrew Jackson</option>
<option value="8">Martin Van Buren</option>
<option value="9">William Henry Harrison</option>
<option value="10">John Tyler</option>
<option value="11">James Knox Polk</option>
<option value="12">Zachary Taylor</option>
<option value="13">Millard Fillmore</option>
<option value="14">Franklin Pierce</option>
<option value="15">James Buchanan</option>
<option value="16">Abraham Lincoln</option>
<option value="17">Andrew Johnson</option>
<option value="18">Ulysses S. Grant</option>
<option value="19">Rutherford B. Hayes</option>
<option value="20">James Garfield</option>
<option value="21">Chester Arthur</option>
<option value="22">Grover Cleveland</option>
<option value="23">Benjamin Harrison</option>
<option value="24">Grover Cleveland</option>
<option value="25">William McKinley</option>
<option value="26">Theodore Roosevelt</option>
<option value="27">William Howard Taft</option>
<option value="28">Woodrow Wilson</option>
<option value="29">Warren Harding</option>
<option value="30">Calvin Coolidge</option>
<option value="31">Herbert Hoover</option>
<option value="32">Franklin D. Roosevelt</option>
<option value="33">Harry S Truman</option>
<option value="34">Dwight D. Eisenhower</option>
<option value="35">John F. Kennedy</option>
<option value="36">Lyndon Johnson</option>
<option value="37">Richard Nixon</option>
<option value="38">Gerald Ford</option>
<option value="40">Ronald Reagan</option>
<optgroup>
<optgroup label="Alive">
<option value="39">James Carter</option>
<option value="41">George H. W. Bush</option>
<option value="42">William J. Clinton</option>
<option value="43">George W. Bush</option>
<option value="44">Barack H. Obama</option>
<optgroup>
</select>
<select id="animal" name="animal">
<option value="a">angelfish</option>
<option value="b">buffalo</option>
<option value="c">canary</option>
<option value="d">dinosaur</option>
<option value="e">eel</option>
<option value="f">flamingo</option>
<option value="g">goldfish</option>
<option value="h">hippo</option>
<option value="i">iguana</option>
<option value="j">jellyfish</option>
<option value="k">kangaroo</option>
<option value="l">llama</option>
<option value="m">moose</option>
<option value="n">narwhal</option>
<option value="o">ostrich</option>
<option value="p">pelican</option>
<option value="q">quail</option>
<option value="r">raccoon</option>
<option value="s">snail</option>
<option value="t">toucan</option>
<option value="u">unicorn</option>
<option value="v">vulture</option>
<option value="w">wildebeest</option>
<option value="f">fox</option>
<option value="x">xenopus</option>
<option value="y">yak</option>
<option value="z">zebra</option>
</select>
</form>
<button id="other" type="button" class="btn btn-success">Button</button>
<script type="text/javascript">
jQuery(document).ready(function() {
$('select').on('change', function() {
console.log('Changed option value ' + this.value);
console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
$("#other").click(function() {
$("#myForm").submit();
});
});
</script>
<?php
if(isset($_GET)) {
echo '<pre>';
var_export($_GET);
echo '</pre>';
}
?>
</body>
</html>Ví dụ 2: Sử dụng select 2 để giao diện đẹp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="content" class="container">
<form id="myForm" action="">
<select id="president" name="president">
<optgroup label="Dead">
<option value="1">George Washington</option>
<option value="2">John Adams</option>
<option value="3">Thomas Jefferson</option>
<option value="4">James Madison</option>
<option value="5">James Monroe</option>
<option value="6">John Quincy Adams</option>
<option value="7">Andrew Jackson</option>
<option value="8">Martin Van Buren</option>
<option value="9">William Henry Harrison</option>
<option value="10">John Tyler</option>
<option value="11">James Knox Polk</option>
<option value="12">Zachary Taylor</option>
<option value="13">Millard Fillmore</option>
<option value="14">Franklin Pierce</option>
<option value="15">James Buchanan</option>
<option value="16">Abraham Lincoln</option>
<option value="17">Andrew Johnson</option>
<option value="18">Ulysses S. Grant</option>
<option value="19">Rutherford B. Hayes</option>
<option value="20">James Garfield</option>
<option value="21">Chester Arthur</option>
<option value="22">Grover Cleveland</option>
<option value="23">Benjamin Harrison</option>
<option value="24">Grover Cleveland</option>
<option value="25">William McKinley</option>
<option value="26">Theodore Roosevelt</option>
<option value="27">William Howard Taft</option>
<option value="28">Woodrow Wilson</option>
<option value="29">Warren Harding</option>
<option value="30">Calvin Coolidge</option>
<option value="31">Herbert Hoover</option>
<option value="32">Franklin D. Roosevelt</option>
<option value="33">Harry S Truman</option>
<option value="34">Dwight D. Eisenhower</option>
<option value="35">John F. Kennedy</option>
<option value="36">Lyndon Johnson</option>
<option value="37">Richard Nixon</option>
<option value="38">Gerald Ford</option>
<option value="40">Ronald Reagan</option>
<optgroup>
<optgroup label="Alive">
<option value="39">James Carter</option>
<option value="41">George H. W. Bush</option>
<option value="42">William J. Clinton</option>
<option value="43">George W. Bush</option>
<option value="44">Barack H. Obama</option>
<optgroup>
</select>
</form>
<button id="other" type="button" class="btn btn-success">Button</button>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(document).ready(function() {
$('#president').select2();
});
$("#other").click(function() {
$("#myForm").submit();
});
});
</script>
<?php
if(isset($_GET)) {
echo '<pre>';
var_export($_GET);
echo '</pre>';
}
?>
</body>
</html>Ví dụ 3: Sử dụng select2 với ajax
https://jsfiddle.net/vg7pgbcb/1/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<style type="text/css">
.select2-container{
width: 100%!important;
}
.select2-search--dropdown .select2-search__field {
width: 98%;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<h1>Load JSON Data To Select2 JQuery Plugin</h1>
<select class="js-data-example-ajax" style="width: 300px">
<option value="">Nhập từ khóa tìm kiếm</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$(".js-data-example-ajax").select2({
ajax: {
url: 'https://api.github.com/search/repositories',
dataType: 'json',
type: "GET",
delay: 250,
data: function(params) {
return {
q: params.term
};
},
minimumInputLength: 1,
placeholder: "Nhập từ khóa tìm kiếm",
processResults: function(data) {
var res = data.items.map(function(item) {
return { id: item.id, text: item.name };
});
return {
results: res
};
}
},
});
});
</script>
</body>
</html>Previous[SELECT2] dropdownParent (ok)Next[SELECT2] Common problems Select2 does not function properly when I use it inside a Bootstrap modal
Last updated
