根據從下拉列表中選擇的選項選擇適當的復選框
[英]Selecting appropriate checkbox based upon Option selected from drop down
問題描述
我需要創建一個基於jquery的界面，其中更改select會導致標記適當的checkebox。 例如，我在下拉列表中列出每個組都有其成員。 例如，A組有5名成員。 當用戶選擇groupA時，會列出每個成員。所有復選框（5個用戶）復選框將自動選中這是我現在擁有的
<?php
$groups[]= array(12 => array ( 1,2,3,4,5),13=>array ( 32,25,26),14=>array(22,23));
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
function selecttheuser()
{
$(document).ready(function() {
var gidet=$("select#group_id").val();
alert(gidet);
});
}
</script>
<select style="width:466px" name="group_id" id="group_id" onchange="selecttheuser()">
<option value="0">Not a Group Event</option>
<option value="12">Gname</option>
<option value="13">Groupname2</option>
</select>
<input type="checkbox" value="19" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="20" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="21" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="22" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="23" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="32" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="25" class="frnzchk" name="frnzchk[]"><br>
<input type="checkbox" value="26" class="frnzchk" name="frnzchk[]"><br>
我有2個問題
- 如何管理它可以擁有100個組的PHP數組，那么如何在javascript中實現這一點
- 如何選擇相應的復選框抱歉如果這看起來很直，但我不知道如何處理這個問題
1 個解決方案
解決方案1
2 已采納 2011-12-19 20:35:56
這是我如何解決這個問題。
首先，我將向您展示工作代碼，然后我會解釋它。
<?php
$groups = array(
12 => array(1, 2, 3, 4, 5),
13 => array(32, 25, 26),
14 => array(22, 23)
);
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Page Title Goes Here</title>
<style type="text/css">
#group_id{ width:466px; }
</style>
</head>
<body>
<select name="group_id" id="group_id">
<option value="0">Not a Group Event</option>
<option value="12">Gname</option>
<option value="13">Groupname2</option>
</select>
<?php
// Loop through each group id
foreach(array_keys($groups) as $groupId)
{
// Create a div that can be identified by the group id
// to hold the checkboxes
$divId = 'group_' . $groupId;
echo '<div id="' . $divId . '">';
// Loop through each id for this particular group
foreach($groups[$groupId] as $choice)
{
// Create the checkbox
echo '<input type="checkbox" '
. 'value="' . $choice . '" '
. 'class="frnzchk" '
. 'name="frnzchk[]"/>'
. '<br/>';
}
echo '</div>';
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Wait until everything is loaded
$(document).ready(function(){
// Bind the "change" function to the group_id drop down
$('#group_id').change(function(){
// Clear all of the choices
$('.frnzchk').attr('checked', false);
// Create the id of the div containing choices
var groupId = '#group_' + $(this).val();
// Check all of the choices for the appropriate group id
$(groupId)
.find('input[type="checkbox"]')
.attr('checked', true);
})
});
</script>
</body>
</html>
這是第一個塊：
<?php
$groups = array(
12 => array(1, 2, 3, 4, 5),
13 => array(32, 25, 26),
14 => array(22, 23)
);
?>
這是您的組列表以及與之關聯的選項。 請注意，當您聲明數組時，您不需要方括號，即$groups = array()而不是$groups[] = array() 。
接下來，我將完整的HTML5頁面放入所有管道，驗證[1]。 我將CSS移出HTML，因為它使組織更容易，實際上這應該移動到一個完全獨立的CSS文件。
這是下一個重要的塊：
<?php
// Loop through each group id
foreach(array_keys($groups) as $groupId)
{
// Create a div that can be identified by the group id
// to hold the checkboxes
$divId = 'group_' . $groupId;
echo '<div id="' . $divId . '">';
// Loop through each id for this particular group
foreach($groups[$groupId] as $choice)
{
// Create the checkbox
echo '<input type="checkbox" '
. 'value="' . $choice . '" '
. 'class="frnzchk" '
. 'name="frnzchk[]"/>'
. '<br/>';
}
echo '</div>';
}
?>
這會遍歷您的每個組，並創建一個DIV來保存該組的所有選項。 div由id group_12 ， group_13或group_14 ; 這些數字來自$groups數組中使用的鍵。
接下來是Javascript：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
// Wait until everything is loaded
$(document).ready(function(){
// Bind the "change" function to the group_id drop down
$('#group_id').change(function(){
// Clear all of the choices
$('.frnzchk').attr('checked', false);
// Create the id of the div containing choices
var groupId = '#group_' + $(this).val();
// Check all of the choices for the appropriate group id
$(groupId)
.find('input[type="checkbox"]')
.attr('checked', true);
})
});
</script>
因為Javascript在一個線程中運行所以我將這一切都放在了主體的末尾，所以這意味着如果你像前面那樣加載它，那么在javascript完成加載之前別無法加載[2]。 在這個例子中，這不是什么大問題，但是當你有很多javascript它可以產生很大的不同！
您會注意到我將所有內容都包裝在$(document).ready(function(){}) - 這是因為在加載所有內容之前，您不希望它工作。 由於你的$(document).ready(function(){})有$(document).ready(function(){}) ，每次調用該函數時，它都會檢查是否所有內容都被加載，如果沒有，那么你就不會看到任何事情發生了。
我將change()函數綁定到select元素，這意味着每當更改select元素時都會調用它，並且將調用該函數內的代碼。 我們重置所有選項，然后選擇相應div中包含的所有選項。
應該這樣做！ 快樂的編碼！
[1] - http://validator.w3.org
PHP switch case - 基於從下拉菜單中選擇的選項使用 file_get_contents()
[英]PHP switch case - using file_get_contents() based on selected option from a drop down menu
根據另一個選擇的選項在下拉菜單中設置選項
[英]Setting the options in a drop-down menu based on the selected option of another
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.