根据下拉菜单选项打开文件

时间：2017-10-05 15:14:13

标签： javascript html function drop-down-menu

web开发新手。我有一个带单选按钮和两个下拉菜单的页面。每个事项的选择，将决定哪个文件将打开。当进行每个选择并且用户点击＆＃34;提交时，＆＃34;我希望页面打开相应的Excel文件。

我有单选按钮和下拉列表，但是当我按下提交时，没有任何反应。我尝试在PHP中执行此操作以使其更具动态性并避免使用如此多的if / else语句，但PHP无法在我的服务器上正常运行，因此我选择使用JavaScript，这将导致更多if语句但会至少是功能性的。

这是我的JavaScript：

<script type="text/javascript">

    var excelObject;
    excelObject = new ActiveXObject("Excel.Application");
    excelObject.Visible = true;
    excelObject.Workbooks.Open(strLocation, false, boolReadOnly);


    //x, y, and z are the variables for the dropdowns/radio button
    var x = document.getElementByID("x");
    var y = document.getElementByID("y");
    var z = document.getElementByID("z");

    window.onload = function(){
        document.getElementByID("x").innerHTML=x;
        document.getElementByID("y").innerHTML=y;
        document.getElementByID("z").innerHTML=z;

    function docOpen(){

        if (x == "test" && y ="cat" && z == "claws"){
            readFile('file:\\folder\folder\test_cat_claws.xls');

这是我添加表单的地方：

<form name ='myform' method="post" onSubmit="Javascript:docOpen()" >

这是我按提交的地方：

<input type= "submit" value="Submit" name="Submit" onclick="Javascript:docOpen(); return false;"/>

修改： 整个代码 - 编辑为更通用：

    <html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <script type="text/javascript">

        var x = document.getElementByID("x");
            var y = document.getElementByID("y");
            var z = document.getElementByID("z");


        window.onload = function(){
            document.getElementByID("x").innerHTML=x;
            document.getElementByID("y").innerHTML=y;
            document.getElementByID("z").innerHTML=z;

        function docOpen(){

            if (x == "test" && y =="cat" && z == "claws"){
                          var excelObject;
                          excelObject = new ActiveXObject("Excel.Application");
                          excelObject.Visible = true;
                          excelObject.Workbooks.Open('file:\your_excel_file_location_here.xlsx', false, boolReadOnly);    
            }
   </script>

   <title>Title</title>

</head>
<body>

<div class="page">
    <div class="header">
    <table border="0px"><tr><td>
    <td id="pagetitle"><h1>Page Title</h1></td>

    <td><iframe src="" height="60" width="280" style="border:none" scrolling="no";> </iframe></td></tr></table>
    </div>

    <div id="includedContent"></div>

<div class="main" id="MainContent">


<div class="form_table">

<!--<div class="clear"></div>-->

<form name ='myform'>

<div id="q0" class="q required">
<a class="item" name="radiobutton0"></a>
<table class="inline_grid">
<tr>
<td> <input type="radio" name="x" id="x" value="test" />Test</label></td>
<td> <input type="radio" name="x" id="x" value="test2" />Test2</label></td>
</tr>
</table>
</div>

<div class="clear"></div>

<div id="q1" class="q required">
<a class="item" name="dropdown1"></a>
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label>
<select id="y" name="y" class="drop_down">
<option></option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird </option>
</select>
</div>

<div id="q2" class="q required">
<a class="item" name="dropdown2"></a>
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label>
<select id="z" name="z" class="drop_down">
<option></option>
<option value="claws">Claws</option>
<option value="paws">Paws</option>
</select>
</div>
<div class="clear"></div><br/>




<input type="Submit" name="Submit" onclick="docOpen();"/>

</form>


    </div>
    <div class="clear">
    </div>

</div>

</body>

</html>

1 个答案:

答案 0 :(得分：0)

好的，有几点需要注意：

在您的逻辑中，您似乎错误地使用了比较运算符，并使用单个=而不是两个==进行比较。改变它看起来像这样。

if (x == "test" && y =="cat" && z == "claws")

此外，您可能过早地初始化ActiveXObject（？）。为什么不在条件满足后创建excel表，如下所示：

if (x == "test" && y =="cat" && z == "claws"){
 var excelObject;
    excelObject = new ActiveXObject("Excel.Application");
    excelObject.Visible = true;
    excelObject.Workbooks.Open(strLocation, false, boolReadOnly);

这样，您的代码甚至无法打开电子表格，除非它们符合特定条件。

另外，据我所知，readFile()不是一个有效的js函数。您需要将文件位置传递到excelObject.Workbooks.Open函数的第一个参数。所有人都说，你的代码看起来像这样：

   //x, y, and z are the variables for the dropdowns/radio button
    var x = document.getElementByID("x");
    var y = document.getElementByID("y");
    var z = document.getElementByID("z");

    window.onload = function(){
            document.getElementByID("x").innerHTML=x;
            document.getElementByID("y").innerHTML=y;
            document.getElementByID("z").innerHTML=z;
            }

    function docOpen(){

        if (x == "test" && y =="cat" && z == "claws"){
            var excelObject;
            excelObject = new ActiveXObject("Excel.Application");
            excelObject.Visible = true;
            excelObject.Workbooks.Open('file:\your_excel_file_location_here.xlsx', false, boolReadOnly);    
                }
}

再次，请注意，这只适用于IE，因为您使用的是ActiveXObjects。也许这足以满足您的需求。

使用完整代码进行编辑： 

   <html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">



   <title>Title</title>

</head>
<body>

<div class="page">
    <div class="header">
    <table border="0px"><tr><td>
    <td id="pagetitle"><h1>Page Title</h1></td>

    <td><iframe src="" height="60" width="280" style="border:none" scrolling="no";> </iframe></td></tr></table>
    </div>

    <div id="includedContent"></div>

<div class="main" id="MainContent">


<div class="form_table">

<!--<div class="clear"></div>-->

<form name ='myform'>

<div id="q0" class="q required">
<a class="item" name="radiobutton0"></a>
<table class="inline_grid">
<tr>
<td> <input type="radio" name="x" id="x1" value="test" />Test</label></td>
<td> <input type="radio" name="x" id="x" value="test2" />Test2</label></td>
</tr>
</table>
</div>

<div class="clear"></div>

<div id="q1" class="q required">
<a class="item" name="dropdown1"></a>
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label>
<select id="y" name="y" class="drop_down">
<option></option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird </option>
</select>
</div>

<div id="q2" class="q required">
<a class="item" name="dropdown2"></a>
<label>&nbsp;<b class="icon_required" style="color:#FF0000">*</b></label>
<select id="z" name="z" class="drop_down">
<option></option>
<option value="claws">Claws</option>
<option value="paws">Paws</option>
</select>
</div>
<div class="clear"></div><br/>


</form>

<button  onclick="docOpen(); return;">button</button>


    </div>
    <div class="clear">
    </div>

</div>


   <script type="text/javascript">

        function docOpen(){

            var x = document.querySelectorAll('input[type="radio"]:checked')[0].value;
            var ySelect = document.getElementById('y');
            var y = ySelect.options[ySelect.selectedIndex].value;
            var zSelect = document.getElementById('z');
            var z = zSelect.options[zSelect.selectedIndex].value;



            if (x == "test" && y =="cat" && z == "claws"){
                          var excelObject;
                          excelObject = new ActiveXObject("Excel.Application");
                          excelObject.Visible = true;
                          excelObject.Workbooks.Open('file:\excel.xlsx');    
            }
        }
   </script>
</body>

</html>
相关问题
最新问题