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

我已经搜索了一个解决方案，但已经来不及;这与通常的解决方案有点不同。根据选择选项标签更改输入值

我正在构建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>

这是很容易自动进入所选值进藏INOUT，但我需要的标签所选择的选项来自动进入的（如果这就是它的名字）隐藏的输入，#col_title。因此，不是所选的值（EG中间名），而是标签（中间名），我无法找到。

任何人都可以提供帮助吗？谢谢！

来源

2016-08-24 TGITC

你尝试过：$（“＃col_name option：selected”）。text（）？ – DinoMyte

试试这个

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()); 
});

工作例如：https://jsfiddle.net/a3qk1s7g/

来源

2016-08-24 18:10:12

您应该委派更改事件而不是点击，因为即使您未更改选定选项，每次都会触发点击。 – DinoMyte

非常好，非常感谢您的先生！ – TGITC

使用.text()来获取元素的文本。 :selected修改器将选择所选的选项。

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

来源

2016-08-24 18:08:50 Barmar

一个做的方式，它是全光照摹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>

上面的代码中听取的变化发现所选择的选项，并复制它的价值标签;

来源

2016-08-24 18:28:34

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

回答

相关问题