Javascript 自动填充选择

Posted 2023-02-24

【中文标题】Javascript 自动填充选择

【英文标题】：Javascript Autofill Selection

【发布时间】：2018-07-30 17:33:41

【问题描述】：

我正在搜索和搜索，但找不到任何我需要的东西。

所以我需要 java 脚本，它会从下拉列表中选择选项，但不是按选项值编号，而是按名称。选择后，该站点应显示我的选择结果。以下是来自需要我选择选项的站点的代码。我想执行一个自动填充的 java 脚本代码。

我有：

<select name="ctl00$ccMain$NZWO" id="ccMain_NZWO" class="Dropdown" onchange="PopulateGrid(this.value)">
            <option value="00">--Select--</option>
            <option value="19">ARGENTINA</option>
            <option value="24">BARCELONA</option>
            <option value="16">CHINA</option>
            <option value="25">JAPAN</option>
            <option value="26">INDONESIA</option>
            <option value="27">INDIA</option>
            <option value="28">USA</option>
            <option value="29">RUSSIA</option>

</select>

我想在哪里选择 JAPAN，这应该使网站在选择 JAPAN 后运行 Onchange 代码。

谢谢

【问题讨论】：

看这个链接：w3schools.com/jsref/event_onchange.asp

嘿 Sai Tarun Sareddy，如果您需要任何帮助来回答我的问题，请告诉我

【参考方案1】：

你需要这个： onchange="PopulateGrid(this.innerhtml)

【参考方案2】：

这是一个使用 fiddle 的工作示例：https://jsfiddle.net/mc48hsbn/16/

添加监听器（更改） 运行displayIt()方法

警报标签

document.getElementById("ccMain_NZWO").addEventListener("change", displayIt);

 function displayIt() 
  var selected_value =document.getElementById("ccMain_NZWO").options[this.selectedIndex].innerHTML;
  alert(selected_value);



 <select name="ctl00$ccMain$NZWO" id="ccMain_NZWO" class="Dropdown" onchange="PopulateGrid(this.value)">
        <option value="00">--Select--</option>
        <option value="19">ARGENTINA</option>
        <option value="24">BARCELONA</option>
        <option value="16">CHINA</option>
        <option value="25">JAPAN</option>
        <option value="26">INDONESIA</option>
        <option value="27">INDIA</option>
        <option value="28">USA</option>
        <option value="29">RUSSIA</option>

</select>

【参考方案3】：

我给你一个 javascript 代码，它将选择一个国家，根据选择，它会在另一个下拉列表中填充该国家的州。

//JavaScript Code
$("#ctl00$ccMain$NZWO").on('change', function()            
        var country1 = document.getElementById("country").value ;           
        var country_array = country1.split("|") ;           
        var country = country_array[0] ;            
        var name = country_array[1] ;
        var xmlhttp ;
        if (window.XMLHttpRequest)
            xmlhttp = new XMLHttpRequest(); 
        
        else
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        
        xmlhttp.open("GET","state.php?action=get_state_names&country="+name,true);
        xmlhttp.send();
        xmlhttp.onreadystatechange=function()
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                var result = xmlhttp.responseText ;                     
                document.getElementById("state").innerHTML = result ;
            
                   
    );

//HTML
<select name="ctl00$ccMain$NZWO" id="ctl00$ccMain$NZWO" class="Dropdown">
        <option value="00">--Select--</option>
        <option value="19|ARGENTINA">ARGENTINA</option>
        <option value="24|BARCELONA">BARCELONA</option>
        <option value="16|CHINA">CHINA</option>
        <option value="25|JAPAN">JAPAN</option>
        <option value="26|INDONESIA">INDONESIA</option>
        <option value="27|INDIA">INDIA</option>
        <option value="28|USA">USA</option>
        <option value="29|RUSSIA">RUSSIA</option>
</select>

实际上这些国名应该来自数据库，你可能需要改变你的代码结构。无论如何，上面的代码将解决您的目的，您可能需要根据您的文件更改一些变量名称或显示 div/dropdown id。您还需要设置您的 state.php 文件，您需要在其中编写选择任何国家时将发生的操作。