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;
}
?>