Javascript：如何选择基于上传文件名的表单选择选项？

Question

Javascript：如何根据上传文件名选择表单选择选项？

我有一个选择表单元素和文件上传输入元素：

<input size="50" name="userfile" type="file" id="id_userfile"/> 

<select name="list" id="id_list"> 
    <option value="">Select element</option> 
    <option value="11">aaa</option> 
    <option value="22">bbb</option> 
    <option value="33">ccc</option> 
</select> 

我想选择BBB，如果文件名包含BBB，及CCC如果文件名包含CCC。否则，只选择“选择元素”选项。

欢迎 1）纯JS的解决方案 和 2）jQuery的解决方案

感谢您的帮助！

Answer 1

$('input#id_userfile').change(function() { 

    var filePath = $(this).val(); 

    if (filePath.indexOf('bbb') > 0) 
     $('select#id_list').val('22'); 
    else if (filePath.indexOf('ccc') > 0) 
     $('select#id_list').val('33'); 
    else 
     $('select#id_list').val(''); 
}); 

Answer 2

更改时，在剥离文件路径后将文件名存储在变量中。检查所需的字符串，并相应地改变选择的选项：

$('#id_userfile').bind('change',function() { 

    var file = $(this).val().replace(/^.*[\\\/]/, ''); 
    var string = file.search("foo"); 

    if(string != "-1") { 
    $("id_list").val("foo"); 
    } else { 
    string = file.search("bar"); 
    if(string != "-1") { 
     $("id_list").val("bar"); 
    } else { 
     $("id_list").val("default"); 
    } 
    } 
})