About javascript Narrowing Search Step 3

Asked 1 years ago, Updated 1 years ago, 21 views

I did it by embedding javascript into html.I put the html and javascript statements together.
But it doesn't work.I wonder why.
Below is the source.

<script type="text/javascript">
/ Regional Select Box Event Settings
setHierarchySelectEvent('#area1','#area2');
setHierarchySelectEvent('#area2','#area3');
// Initial value of select box
$('#area1').val('1').change();
$('#area2').val('2').change();
$('#area3').val('2').change();

/**
 * Configures a pulldown event with a hierarchy.
 * The parent select tag must have the attribute data-subgroup configured.
 * The child select tag must have the attribute data-group configured.
 * @param parentSelect Selector of the parent select tag
 * @param childSelector Selector of the select tag
 */
function setHierarchySelectEvent(parentSelect, childSelect){
    var initCategorySmallHtml=$(childSelect).html();
    $(parentSelect).change(function(){
        if(1<$(this).find('option:selected').length){
            $(childSelect).find("option").each(function(index,element){
                $(element).remove();
            });
        } else {
            var subgroup=$(this).find('option:selected').attr('data-subgroup');
            $(childSelect).html(initCategorySmallHtml);
            $(childSelect).find("option").each(function(index,element){
                vargroup=$(element).atttr('data-group');
                if(group){
                    if(subgroup==group){
                        // $(element).css('display', 'block'); // IE does not display for option tags
                    } else {
                        // $(element).css('display', 'none'); // IE does not display for option tags
                        $(element).remove();
                    }
                }
            });
        }
        $(childSelect).val(').change(); // Rewrite the unselected value if it is not ''.
    });
}
</script>
<select name="area1" id="area1">
    <option data-subgroup="value="">Not selected</option>
    <option data-subgroup="nihon" value="1">Japan</option>
    <option data-subgroup="amerika" value="2">USA</option>
    <option data-subgroup="doitu" value="3">Germany</option>
</select>
<select name="area2" id="area2">
    <option data-group="value="">Not selected</option>
    <option data-group="nihon" data-subgroup="tokyo" value="1">Tokyo</option>
    <option data-group="nihon" data-subgroup="niigata" value="2">Niigata</option>
    <option data-group="nihon" data-subgroup="okinawa" value="3">Okinawa</option>
    <option data-group="amerika" data-subgroup="nyu-yo-ku" value="1">New York</option>
    <option data-group="amerika" data-subgroup="sikago" value="2">Chicago</option>
    <option data-group="doitu" data-subgroup="kerun" value="1">Cologne</option>
</select>
<select name="area3" id="area3">
    <option data-group="value="">Not selected</option>
    <option data-group="tokyo" value="1">Shinagawa Ward</option>
    <option data-group="tokyo" value="2">Port </option>
    <option data-group="tokyo" value="3">Koto Ward</option>
    <option data-group="niigata" value="1">Niigata City</option>
    <option data-group="niigata" value="2">Kashiwazaki City</option>
    <option data-group="niigata" value="3">Nagaoka City</option>
    <option data-group="okinawa" value="1">Naha City</option>
    <option data-group="okinawa" value="2">Awakuni Village</option>
    <option data-group="okinawa" value="3">Yonakuni-cho</option>
    <option data-group="nyu-yo-ku" value="1">Somewhere in New York 1</option>
    <option data-group="nyu-yo-ku" value="2">Somewhere in New York 2</option>
    <option data-group="sikago" value="1">Somewhere in Chicago 1</option>
    <option data-group="sikago" value="2">Somewhere in Chicago 2</option>
    <option data-group="kerun" value="1">Somewhere in Cologne</option>
</select>

javascript

2022-09-30 17:09

1 Answers

Attempting to perform DOM operation before HTML is read.
If you move the script to just before </body>, you will get the desired results.


2022-09-30 17:09

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.