изменение значения input при смене значения select
Здравствуйте.
Небольшая задача. Есть поле input в которое вводиться какое либо слово, есть select c двумя option в value которых записаны 2 цвета. Требуется чтобы при изменении значения select, значение в input обертывалось span со стилем заданным в выбранном option.
$(function(){
$('#options').change(function(){
curtext = $('#textfield').val();
curcolor = $('#options :selected').val();
result = '<span style="color:' + curcolor + '">' + curtext '</span>';
$('#textfield').val(result);
})
})
<input style="width:600px" id="textfield" type="text" value="слово"/> <select id="options"> <option value="#000">Черный</option> <option value="#fff">Белый</option> </select> Проблема в том что при первом выборе, когда введенное слово ещё не обрамлено в span все нормально, но если изменить select 2 и более раз скрипт начинает сохранять в переменную слово которое уже находиться в span и собственно уже это результат кладёт между новым тегом span. Собственно вопрос в том, как сделать так чтобы при каждом срабатывании в span вставлялось только введенное слово. |
Так а зачем span если можно просто полю css свойства менять ?
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(function(){
$('#options').change(function(){
curcolor = $('#options :selected').val();
$('#textfield').css('color', curcolor);
})
});
</script>
</head>
<body>
<input style="width:600px" id="textfield" type="text" value="слово"/>
<select id="options">
<option value="#000">Черный</option>
<option value="#fff">Белый</option>
<option value="red">Красный</option>
</select>
</body>
</html>
|
Дело в том что после выбора данные будут отправлены на сервер, и текст будет отображен поверх какой либо картинки (разный цвет для контраста). Как я понимаю данные о цвете поля на сервер не передаются.
|
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<input style="width:400px" id="textfield" type="text" value="слово"/>
<select id="options">
<option value="#000">Черный</option>
<option value="#fff">Белый</option>
</select>
<script type="text/javascript">
var noFirst=false;
$(function(){
$('#options').change(function(){
var curtext = $('#textfield').val();
if(noFirst){
curtext = curtext.replace(/<span[^>]*>([^<]*)\<\/span>/img,"$1")
} noFirst=true;
var curcolor = $(this).val();
var result = '<span style="color:' + curcolor + '">' + curtext + '</span>';
$('#textfield').val(result);
})
})
</script>
|
А как сделать, чтобы в инпут выводился не код с цветом и не цветное слово, а именно название цвета?
Т.е. выбрали в селекте Чёрный и в инпуте value стало = Чёрный Понял:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".selector").change(function() {
var $value = $(this).val();
var $title = $(this).children('option[value='+$value+']').html();
$('input#colorr').val($title);
});
});
</script>
<select class="selector">
<option value="1000000">Белый</option>
<option value="2000000">Красный</option>
<option value="3000000">Чёрный</option>
</select>
<input id="colorr" class="colorr" value="" name="testinput"">
|
| Часовой пояс GMT +3, время: 01:32. |