Существует несколько способов выполнить вашу запрошенную реализацию. jQuery-таблицы, bootstrap, рамки thymeleaf и т. д. Однако, чтобы ответить на ваш конкретный вопрос, мы можем добавить очень простой HTML со встроенным javascript, чтобы получить желаемый результат. нам нужен javascript для динамического обновления выбранного приоритета (выпадающего списка) с текстом и применения его с требуемым цветом.
Я привел ниже пример кода, который является таким же простым, как и то, что вам нужно. Функция javascript show() проверит выбранное значение в раскрывающемся списке, а затем динамически обновит таблицу результатов на основе выбранного значения выпадающего списка с текстом, введенным в текстовое поле.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<script language="JavaScript">
function show(){
var textEntry = document.getElementById('myText').value;
if(textEntry == ''){
alert("Please enter a task");
return;
}
var selection = document.getElementById('mySelection');
var selectionText = selection.options[selection.selectedIndex].text;
var fontColor='';
if(selection.value=='normal'){
fontColor='#259523';
}
if(selection.value=='undecided'){
fontColor='#3339FF';
}
if(selection.value=='critical'){
fontColor='#FF9F33';
}
document.getElementById('textEntry').innerHTML='<font color="'+fontColor+'">'+textEntry+'</font>';
document.getElementById('priority').innerHTML='<font color="'+fontColor+'">'+selectionText+'</font>';
}
</script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="myText">
</td>
<td>
<select id="mySelection">
<option value="normal" selected>Normal</option>
<option value="undecided">If You Can</option>
<option value="critical">Critical</option>
</select>
</td>
<td>
<input type="button" onclick="show()" value="Add">
</td>
</tr>
<tr>
<td id="textEntry"></td>
<td id="priority"></td>
</tr>
</table>
</body>
</html>
Можете ли вы показать, что вы пробовали? было бы неплохо начать. – semuzaboi