来自选择框的条件显示值

Question

大家好，我尝试从一个选择框中显示一个表单中的特定值。例如，如果我选择“仲裁中心”，我想在输入文本字段中显示 65 以获取控制器中的值。有人现在如何实现这一目标？ 非常感谢。

顺便说一句，这种技术对我来说是单选按钮而不是选择框选项！

这是我想要的主要想法的表格，但它当然不起作用：

<td>
    <div class="form-group">
        <select name="fonction" class="form-control select2" style="width: 100%;">
            <option name="choiceBareme" value="optionArbitreCentral">Arbitre Central</option>
            <option name="choiceBareme" value="optionJugeDeTouche">Juge de Touche</option>
            <option name="choiceBareme" value="optionDelegue">Délégué</option>
            <option name="choiceBareme" value="optionArbitreVideo">Arbitre Vidéo</option>
        </select>
    </div>
</td>
<td>
    <div class="conditional" data-cond-option="choiceBareme" data-cond-value="optionArbitreCentral">
        0
    </div>

    <div class="conditional" data-cond-option="choiceBareme" data-cond-value="optionJugeDeTouche">
        1
    </div>
</td>

Answer 1

在special_val 的选项中添加新属性，您希望在更改时反映在输入文本中

<select name="fonction" class="form-control select2" style="width: 100%;">
        <option name="choiceBareme" value="optionArbitreCentral" special_val="12">Arbitre Central</option>
        <option name="choiceBareme" value="optionJugeDeTouche"  special_val="912">Juge de Touche</option>
        <option name="choiceBareme" value="optionDelegue"  special_val="192">Délégué</option>
        <option name="choiceBareme" value="optionArbitreVideo"  special_val="62">Arbitre Vidéo</option>
</select>
<input type="text" value="" id="input_text" name="special_val">

和onchange调用jQuery函数

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js">
</script><script type="text/javascript">
$(document).ready(function() {
    $('.select2').on('change', function(){
        $("#input_text").val($('.select2 option:selected').attr('special_val'));
    });
});
</script>

在这里查看：http://jsfiddle.net/0o368npa/

Answer 2

你可以这样做

<script type="text/javascript">
var obj={optionArbitreCentral:65,optionJugeDeTouche:55,optionDelegue:46,optionArbitreVideo:68};
function displayVal(){
var val=document.getElementById('mySelect').value;
document.getElementById('myInput').value=obj[val];
}
</script>
<select id="mySelect" onchange="displayVal()" name="fonction" class="form-control select2" style="width: 100%;">
            <option name="choiceBareme" value="optionArbitreCentral">Arbitre Central</option>
            <option name="choiceBareme" value="optionJugeDeTouche">Juge de Touche</option>
            <option name="choiceBareme" value="optionDelegue">Délégué</option>
            <option name="choiceBareme" value="optionArbitreVideo">Arbitre Vidéo</option>
        </select>
   
<input id="myInput"/>