Php 根据选择选项标签更改输入值_Php_Jquery_Html_Mysql_Forms

Php 根据选择选项标签更改输入值

php jquery html mysql forms

Php 根据选择选项标签更改输入值,php,jquery,html,mysql,forms,Php,Jquery,Html,Mysql,Forms,我一直在寻找解决这个问题的办法，但没有找到；这与通常的解决方案有点不同我正在构建一个PHP图形系统，作为其设置功能的一部分，我需要能够使用1个“选择”输入提交MySQL数据库中的2列。用户会看到一个眼睛友好的下拉列表，选择一个眼睛友好的选项，并添加2个必需的值。提交的一个值需要引用sql格式的列名（如col_1），另一个值需要是它的直观标签（“列1”）。因此，对于以下示例： <select name="col_name" id="col_name"> <opt

我一直在寻找解决这个问题的办法，但没有找到；这与通常的解决方案有点不同

我正在构建一个PHP图形系统，作为其设置功能的一部分，我需要能够使用1个“选择”输入提交MySQL数据库中的2列。用户会看到一个眼睛友好的下拉列表，选择一个眼睛友好的选项，并添加2个必需的值。提交的一个值需要引用sql格式的列名（如col_1），另一个值需要是它的直观标签（“列1”）。因此，对于以下示例：

<select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
</select>

<input type="hidden" name="col_title"></input>


名字
中名
第二个名字

自动将所选值输入到隐藏的输入输出中很容易，但我需要所选选项的标签（如果是它的名称）来自动输入隐藏的输入，即col#u title。所以不是选择的值（例如中间名），而是标签（中间名），我在上面找不到太多

有人能帮忙吗？谢谢大家!

使用

.text（）

获取元素的文本。

：selected

修改器将选择所选选项

var label = $("#col_name option:selected").text();
$("input[name=col_title]").val(label);

使用

.text（）

获取元素的文本。

：selected

修改器将选择所选选项

var label = $("#col_name option:selected").text();
$("input[name=col_title]").val(label);

试试这个

HTML:

工作示例：

试试这个

HTML:

工作示例：

一种方法是像这样使用JQuery：

<html>
<head>
<title>Try</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type='text/javascript'></script>
</head>
<body>  

    <select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
    </select>

    <input type="hidden" name="col_title" id="col_title"></input>

    <script type='text/javascript'>

        $("#col_name").change(function(){

            $("#col_name").children().each(function(){

                if(this.value == $('#col_name').val()){

                    $("#col_title").val(this.innerHTML);
                }

            });

            // console.log($("#col_title").val());

        });

    </script>
</body>


尝试
名字
中名
第二个名字
$（“#col_name”）.change（函数（）{
$（“#col_name”）.children（）.each（function（））{
if（this.value=$（'#col_name'）.val（））{
$（“#col_title”）.val（this.innerHTML）；
}
});
//console.log（$（“#col_title”）.val（）；
});

上面的代码侦听“查找所选选项”上的更改，并将其值复制到标记中

一种方法是像这样使用JQuery：

<html>
<head>
<title>Try</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type='text/javascript'></script>
</head>
<body>  

    <select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
    </select>

    <input type="hidden" name="col_title" id="col_title"></input>

    <script type='text/javascript'>

        $("#col_name").change(function(){

            $("#col_name").children().each(function(){

                if(this.value == $('#col_name').val()){

                    $("#col_title").val(this.innerHTML);
                }

            });

            // console.log($("#col_title").val());

        });

    </script>
</body>


尝试
名字
中名
第二个名字
$（“#col_name”）.change（函数（）{
$（“#col_name”）.children（）.each（function（））{
if（this.value=$（'#col_name'）.val（））{
$（“#col_title”）.val（this.innerHTML）；
}
});
//console.log（$（“#col_title”）.val（）；
});

上面的代码侦听“查找所选选项”上的更改，并将其值复制到标记中

您是否尝试过：$（“#col#u name option:selected”）.text（）？您是否尝试过：$（“#col#u name option:selected”）.text（）？您应该委派更改事件而不是单击，因为每次都会触发单击，即使您没有更改所选选项，您也应该委派更改事件而不是单击，即使不更改选定的选项