Question

如何使用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);             
        }
    }
}

当我尝试时，它不起作用..任何人都可以帮助我吗？

Answer 1

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

HTML：

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

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

javaScript：

var selectBox = document.getElementById("selectBox");
selectBox.onchange = function(){
    var textbox = document.getElementById("messageTextBox");
    textbox.value = this.value;
};

jsFiddle

您的解决方案：

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%;" />

javaScript / jQuery：

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

jsFiddle

Answer 2

试试这个：

按一下id按钮并移除onclick

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

将onclick事件绑定到按钮，如下所示

$('#getValue').click(function(){
   var text = $('#list option:selected').text();
   $('#selectedvalue').val(text);
});

Answer 3

试试这个，

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

Answer 4

单击按钮时将调用show_value()函数。在函数内部，我已使用选择列表的值设置文本框的值。

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

Answer 5

使用以下内容替换您的javascript代码：

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

如何使用javascript在文本框中显示所选值？

5 个答案: