Question

有人可以帮帮我吗？我正在使用jQuery。我需要5种语言。这是一个动态列表。

操作：每种语言都有一个复选框，以及一个下拉菜单，只有在选中复选框时才显示。

Answer 1

更简单：

$('#lang_es').click(function(){
    $('#f_level_es').toggle();
});

Answer 2

这很容易，只是添加了一些类，改进了一些代码。然后我只是复制了HTML，并使JavaScript适用于所有复选框。

现场演示：http://jsfiddle.net/mc2Rw/2/

Answer 3

这个PHP（你可以粘贴here来测试）代码：

$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');

在this demo中生成HTML。可能需要对你的布局/ CSS类进行一些调整。

修改：完成.php页面示例：

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

Answer 4

<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>

Answer 5

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

带有jQuery的动态列表 - 复选框和下拉列表

5 个答案: