如何使用javascript在文本框上显示选定值？

如何使用javascript在文本框中显示所选项目的值

// MY LIST
<select id="list" class="form-control" multiple="">
  <option value="2014">Your Cute</option>
  <option value="2013">Your Ugly</option>
  <option value="2011">Your Awesome</option>
</select>

// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>

<input type="text" id="selectedvalue" class="text" name="selectedvalue" />

//我的列表
你的可爱
你的丑
你真棒
//按钮和文本框
获得价值

我想出了这个javascript代码

function showgroup_id () {
    $('#selectedvalue').val(selectedvalue);  
    var myList = document.getElementById('list');
    var selected-value = selectedItem;
    var selectedGroupIds = [];
    for (var i = 0; i < myList.length; i++) {
        if (myList[i].selected) {
            selectedselectedItem.push(myList[i].value);             
        }
    }
}

函数showgroup\u id（）{
$（'#selectedvalue'）.val（selectedvalue）；
var myList=document.getElementById（'list'）；
var selected value=selectedItem；
var selectedGroupIds=[]；
对于（变量i=0；i

当我尝试时，它不起作用。。有人能帮我吗？

试试这个：

给按钮提供一些

id

，然后单击

onclick

<button id="getValue" type="button" value="Get Value">Get Value</button>

---

您可以使用onchange事件通过更改select元素来更改文本框内容

HTML:

<select id="selectBox">
    <option>A</option>
    <option>B</option>
</select>

<input type="text" id="messageTextBox" />

您的解决方案：

<select id="list" class="form-control" multiple="">
    <option value="2014">Your Cute</option>
    <option value="2013">Your Ugly</option>
    <option value="2011">Your Awesome</option>
</select>

// BUTTON and TEXTBOX
<button onclick="showgroup_id();" type="button" value="Get Value">Get Value</button>

<input type="text" id="selectedvalue" class="text" name="selectedvalue"  style="width: 55%;" />

function showgroup_id () {
    var result = "";
    var selectedItem = $('#selectedvalue').val(selectedvalue);  
    var myList = document.getElementById('list');
    var selectedValues = selectedItem;
    var selectedGroupIds = [];
    for (var i = 0; i < myList.length; i++) {
        if (myList[i].selected) {
            //selectedselectedItem.push(myList[i].value);
            //alert(myList[i].text);
            result = result + " " + myList[i].text;
            $("#selectedvalue").val(result);
        }
    }
}

HTMl:

<select id="list" class="form-control" multiple="">
    <option value="2014">Your Cute</option>
    <option value="2013">Your Ugly</option>
    <option value="2011">Your Awesome</option>
</select>

// BUTTON and TEXTBOX
<button onclick="showgroup_id();" type="button" value="Get Value">Get Value</button>

<input type="text" id="selectedvalue" class="text" name="selectedvalue"  style="width: 55%;" />

function showgroup_id () {
    var result = "";
    var selectedItem = $('#selectedvalue').val(selectedvalue);  
    var myList = document.getElementById('list');
    var selectedValues = selectedItem;
    var selectedGroupIds = [];
    for (var i = 0; i < myList.length; i++) {
        if (myList[i].selected) {
            //selectedselectedItem.push(myList[i].value);
            //alert(myList[i].text);
            result = result + " " + myList[i].text;
            $("#selectedvalue").val(result);
        }
    }
}

你的可爱
你的丑
你真棒
//按钮和文本框
获得价值

javaScript/jQuery:

<select id="list" class="form-control" multiple="">
    <option value="2014">Your Cute</option>
    <option value="2013">Your Ugly</option>
    <option value="2011">Your Awesome</option>
</select>

// BUTTON and TEXTBOX
<button onclick="showgroup_id();" type="button" value="Get Value">Get Value</button>

<input type="text" id="selectedvalue" class="text" name="selectedvalue"  style="width: 55%;" />

function showgroup_id () {
    var result = "";
    var selectedItem = $('#selectedvalue').val(selectedvalue);  
    var myList = document.getElementById('list');
    var selectedValues = selectedItem;
    var selectedGroupIds = [];
    for (var i = 0; i < myList.length; i++) {
        if (myList[i].selected) {
            //selectedselectedItem.push(myList[i].value);
            //alert(myList[i].text);
            result = result + " " + myList[i].text;
            $("#selectedvalue").val(result);
        }
    }
}

函数showgroup\u id（）{
var结果=”；
var selectedItem=$（'#selectedvalue'）.val（selectedvalue）；
var myList=document.getElementById（'list'）；
var selectedValues=selectedItem；
var selectedGroupIds=[]；
对于（变量i=0；i

试试这个

<html lang="us">
<head>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script>
        function show_value()
        {
            $("#selectedvalue").val($("#list").val());
        }

    </script>
</head>
<body>
<select id="list" class="form-control" multiple="">
    <option value="2014">Your Cute</option>
    <option value="2013">Your Ugly</option>
    <option value="2011">Your Awesome</option>
</select>

// BUTTON and TEXTBOX
<button onclick="show_value();" type="button" value="Get Value">Get Value</button>

<input type="text" id="selectedvalue" class="text" name="selectedvalue"  style="width: 55%;" />

</body>

函数show_value（）
{
$（“#selectedvalue”）.val（$（“#list”）.val（））；
}
你的可爱
你的丑
你真棒
//按钮和文本框
获得价值

单击按钮时将调用

show_value（）

函数。在函数内部，我用选择列表的值设置了文本框的值

function show_value()
{
  $("#selectedvalue").val($("#list").val());
}

---

将javascript代码替换为以下代码：

function show_value() {
    document.getElementById("selectedvalue").value = document.getElementById( "list" )[ (document.getElementById( "list" )).selectedIndex ].text;
}

---

“它不工作”->错误消息？欢迎使用StackOverflow。“它不起作用”是你能告诉我们的唯一最没有帮助的事情。什么不起作用，什么不起作用，它做了什么，它不应该只是以防万一-您试图调用“show_value（）”方法，而没有定义它的showgroup_id（）”方法。这是你想要的吗？@AshadShanto是的，就是这样。。但我想展示它的价值。。例如，您的可爱具有“2014”值。。所以，当我点击“获取值”时，它必须在文本框上显示2014。这有可能吗？如果按钮id因某种原因发生变化怎么办？onclick似乎是一个更好的选择。不是吗？只要按钮不是动态生成的，更改按钮

id

的机会就少了。若在case

id

中发生了变化，那个么开发人员只需在绑定的click处理程序中更新它即可<选择和输入项的code>id也可以更改，在这种情况下，我们需要更新一个代码，而不考虑函数或jquery。请为OP添加一些解释。单击按钮时将调用show_value（）函数。在函数内部，我用选择列表的值设置了文本框的值。我用jquery来做这个，如果你不知道jquery的基本语法，请用谷歌搜索一下。有很多文档。