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

问题描述：

I've searched for a solution to this but have come up short; it's a bit different to the usual solution.

I'm building a PHP Graph system, and as part of its setup features I need to be able to submit to 2 columns in a MySQL database using 1 "select" input. The user sees an eye friendly drop-down, selects an eye-friendly option, and the 2 required values are added. The one value submitted needs to refer to a sql-formatted column name (such as col_1) and the other value needs to be the eye-friendly label for it ("Column 1"). So for the following example:

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

It's easy enough to automatically enter the selected value into the hidden inout, but I need the label (if that's its name) of the selected option to automatically enter into the hidden input, #col_title. So not the selected value (EG middle_name), but the label (Middle Name), which I can't find much on.

Would anyone be able to help? Thank you!

我已经搜索过这个问题的解决方案但是已经很短了; 它与通常的解决方案有点不同。 p>

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

 ＆lt; select name =“col_name”id =“col_name”＆gt; 
＆lt; option value =“first_name”＆gt;名字＆lt;  / option＆gt; 
＆lt; option value =“middle_name”＆gt;中间名＆lt; / option＆gt; 
＆lt; option value =“second_name”＆gt; Second Name＆lt; / option＆gt; 
＆lt; / select＆gt; 
 
＆lt; 输入类型=“隐藏”名称=“col_title”＆gt;＆lt; / input＆gt; 
  code>  pre> 
 
 自动输入所选值 em>非常简单 >进入隐藏的inout，但是我需要所选选项的标签 em>（如果这是它的名字）自动输入隐藏的输入#col_title。 所以不是选中的值（EG middle_name），而是标签（中间名），我找不到多少。   p> 
 
 
有人能帮忙吗？ 谢谢！ p> 
  div>

答

Try this

HTML:

<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="textbox" />

jQuery:

// init
$('#textbox').val($('#col_name option:selected').text());
//on selecting
$('#col_name').on('change', function() {
    $('#textbox').val($(this).find('option:selected').text());
});

Working example: https://jsfiddle.net/a3qk1s7g/

答

Use .text() to get the text of an element. The :selected modifier will select the selected option.

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

答

One way of doing it is by using JQuery like so:

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

the code above listen to changes on the find the selected option and copy it's value to the tag;

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

相关推荐