Dynamic list with jQuery - checkbox and dropdown
Can anyone help me out, please? I'm using jQuery. I 开发者_如何学Pythonneed to have 5 languages. It is a dynamic list.
Action: Every language has a checkbox, and a dropdown along with it, which is only shown when the checkbox is checked.
Live demo: http://jsfiddle.net/mc2Rw/
easier that way :
$('#lang_es').click(function(){
$('#f_level_es').toggle();
});
It's very easy, just added some classes, improved the code a bit. Then I just duplicated the HTML, and made the JavaScript work for all checkboxes.
Live demo: http://jsfiddle.net/mc2Rw/2/
This PHP (you can paste here to test) code:
$languages = array('en' => 'English', 'es' => 'Spanish', 'fr' => 'French', 'de' => 'German', 'kl' => 'Klingon');
function selectifyMe($language, $key) {
echo $html = <<<HTML
<div>
<label for="lang_$key"><input type="checkbox" name="language[$key]" id="lang_$key" value="1"/>$language</label>
<select name="level[]" id="f_level_$key">
<option value="None">your level</option>
<option value="Low">Low</option>
<option value="Average">Average</option>
<option value="Fluent">Fluent</option>
<option value="Native">Native</option>
</select>
</div>
HTML;
}
array_walk($languages, 'selectifyMe');
produces the HTML in this demo. Might need some tweaking for your layout/CSS classes.
Edit: Complete .php
page example:
<?php
$languages = array('en' => 'English', 'es' => 'Spanish', 'fr' => 'French', 'de' => 'German', 'kl' => 'Klingon');
function selectifyMe($language, $key) {
echo $html = <<<HTML
<div>
<label for="lang_$key"><input type="checkbox" name="language[$key]" id="lang_$key" value="1"/>$language</label>
<select name="level[]" id="f_level_$key">
<option value="None">your level</option>
<option value="Low">Low</option>
<option value="Average">Average</option>
<option value="Fluent">Fluent</option>
<option value="Native">Native</option>
</select>
</div>
HTML;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
div {
height:25px;
}
label {
text-align:left;
width:100px;
display:inline-block;
vertical-align:top;
}
input {
margin-right:5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('select').toggle();
$('input').click(function(event){
$(this).closest('div').children('select').toggle();
});
});
</script>
</head>
<body>
<?php
array_walk($languages, 'selectifyMe');
?>
</body>
</html>
<script type="text/javascript" src="jquery-1.js"></script>
<style type="text/css">
div {
height:25px;
}
label {
text-align:left;
width:100px;
display:inline-block;
vertical-align:top;
}
input {
margin-right:5px;
}
</style>
<script type="text/javascript">
function showCD(str)
{
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// document.getElementById("newone").innerHTML=xmlhttp.responseText;
$('#newone').append(xmlhttp.responseText);
// document.getElementById('newone').appendChild(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "123.php?q=" + str, true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
//$('select').toggle();
$('input').click(function(event) {
$(this).closest('div').children('select').toggle();
});
});
//]]>
</script>
<?php
@mysql_select_db('badoo',mysql_connect('localhost', 'root', ''));
$query = "select id,language,code from language WHERE first=1";
$results = mysql_query( $query);
$lang = array();
while ($rows = mysql_fetch_assoc(@$results)){
$lang[$rows['language']] = $rows['code'];
}
?>
<form action="" method="post" name="myForm" id="myForm" >
<?php
foreach($lang as $key=>$value){ ?>
<div>
<label for="lang_<?=$value;?>" >
<input name="language[<?=$value;?>]" id="lang_<?=$value;?>" value="1" type="checkbox">
<?=$key;?>
</label>
<select style="display: none;" name="level[<?=$value;?>]" id="f_level_<?=$value;?>">
<option selected="selected" value="">your level</option>
<option value="Low">Low</option>
<option value="Average">Average</option>
<option value="Fluent">Fluent</option>
<option value="Native">Native</option>
</select>
</div>
<?php } ?>
<input value="submit" name="submit" type="submit">
<!--**********************************************************-->
<br />
<br />
<br />
<?php
@mysql_select_db('badoo',mysql_connect('localhost', 'root', ''));
$query = "select id,language,code from language WHERE first=0";
$results = mysql_query( $query);
$lang = array();
while ($rows = mysql_fetch_assoc(@$results)){
$lang[$rows['language']] = $rows['code'];
}
?>
<select name="level[]" id="f_level" onchange="showCD(this.value)">
<option selected="selected" value="">language</option>
<?php
$results = mysql_query( $query);
while ($rows = mysql_fetch_assoc(@$results)){
?>
<option value="<?php echo $rows['id'];?>" ><?php echo $rows['language'];?></option>
<?php
}
?>
</select>
<div id="newone"></div>
</form>
<?php
mysql_select_db('badoo',mysql_connect('localhost', 'root', ''));
if($_REQUEST)
{
$id = $_REQUEST['q'];
$query = "select id,language,code from language where id = ".$id;
$results = mysql_query( $query);
$rows = mysql_fetch_assoc($results );
if($rows!='')
{?>
<div>
<label for="lang_<?=$rows['code'];?>" >
<input name="language[<?=$rows['code'];?>]" id="lang_<?=$rows['code'];?>" checked="checked" value="1" type="checkbox">
<?=$rows['language'];?>
</label>
<select name="level[<?=$rows['code'];?>]" id="f_level_<?=$rows['code'];?>">
<option selected="selected" value="">your level</option>
<option value="Low">Low</option>
<option value="Average">Average</option>
<option value="Fluent">Fluent</option>
<option value="Native">Native</option>
</select>
</div>
<?php
}
return;
}
?>
精彩评论