根據選擇選項標籤更改輸入值

我已經搜索了一個解決方案，但已經來不及;這與通常的解決方案有點不同。根據選擇選項標籤更改輸入值

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

根據選擇選項標籤更改輸入值

回答

相關問題