select相关问题--下拉选框既可以自定义也可以选择，然后还要一对一

前天做了个小微刊，很急，中午饭都没有时间吃，终于赶出来了，(～ o ～)~zZ

需求是这样的，三个下拉选框可以选择也可以自定义，其实一开始我是懵逼的下拉选框要怎么让客户自定义呢

后来上网查了下还是可以实现的，原理很简单，就是再定义一个input样式覆盖在select上，再将select value值赋给input上

原生js 是这样写的

 function selectOnChangeFunc() {
        document.getElementById('id_input').value = document.getElementById('id_select').options[document.getElementById('id_select').selectedIndex].value;
    }

手机端用了zepto.js的库，所简写为

 $('#id_input').val($('#id_select').val());

注意:一定要把input的背景色设置为背景色否则遮不住select，要出问题的，option自定义是这样的

<option value="" >---自定义---</option>

然后，搞事情的甲方来了，希望选择了第一个选项后两个select的值是相对应，也就是比如选择第一个select的第二个值，后面两个选框会默认选择它们的第二个值

其实说来原理也简单获取selectIndex就可以了,完整代码如下：

$('#id_select').on('change', function(){
            $('#id_input').val($(this).val());
            var index = $('#id_select option').eq($("#id_select").attr("selectedIndex")).index();
            //console.log(index);
            if(index == 8){
                $('#input2').val("");
                $('#input3').val("");
            }else{
                $("#id_select2").get(0).selectedIndex=index;
                $('#input2').val($('#reality option').eq($("#id_select2").attr("selectedIndex")).text());
                $("#id_select3").get(0).selectedIndex=index;
                $('#input3').val($('#description option').eq($("#id_select2").attr("selectedIndex")).text());
            }
        });