2014-11-19 3 views
-3

Как я могу показать значение выбранных элементов в текстовом поле с помощью 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" /> 

Я придумал этот код яваскрипта

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

Когда я пытался, он не работает .. кто может мне помочь, пожалуйста?

+0

"не работает" -> сообщение об ошибке? –

+0

Добро пожаловать в StackOverflow. «это не работает» - это единственная самая бесполезная вещь, которую вы могли бы нам рассказать. ** Что ** не работает **, что ** не делает, ** что ** делает, что он не должен – freefaller

+0

на всякий случай - вы пытаетесь вызвать метод show_value() и для этого нет определения, вместо этого он показывает метод showgroup_id(). – codebot

ответ

1

Вы можете использовать OnChange событие для изменения текстового поля содержимое с изменением выбранного элемента.

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

0

Попробуйте это:

дают некоторое 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); 
}); 
+0

Что делать, если по какой-то причине изменяется идентификатор кнопки? onclick кажется лучшим вариантом. не так ли? –

+0

Вероятность изменения кнопки 'id' меньше, поскольку кнопка не генерируется динамически. И если в случае изменения 'id', разработчик может просто обновить его в обработчике привязанных кликов. 'id' элемента select и input также может быть изменен, в этом случае нам нужно обновить код независимо от функции или jquery. –

0

Попробуйте это,

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

0

Функциябудет вызываться при нажатии кнопки. Внутри функции я установил значение текстового поля со значением списка выбора.

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

Пожалуйста, добавьте некоторое объяснение для OP. – DontVoteMeDown

+0

Функция show_value() вызывается при нажатии кнопки. Внутри функции я установил значение текстового поля со значением списка выбора. Я использовал jquery для этого, если вы не знаете базовый синтаксис jquery, пожалуйста, google. Существует много документации. –

0

заменить яваскрипта код следующим образом:

function show_value() { 
    document.getElementById("selectedvalue").value = document.getElementById("list")[ (document.getElementById("list")).selectedIndex ].text; 
} 
Смежные вопросы