Run Function on default HTML Select with PHP And Javascript

Question

I try to Run Default Function on HTML Select, but Default Function doesn't works for Default Selected Value, But it Works On User Select

<?php
    $status_selected = 'A002';
?>
<!-- HTML Select 1 -->
<select id="state" class="l" name="state" onchange="Func()">
<option value="A001" <?php if($status_selected == "A001") echo "selected"; ?> data_item=" , StateA003 One, A003 State Two, A003 State Three">A001</option>
<option value="A002" <?php if($status_selected == "A002") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A002</option>
<option value="A003" <?php if($status_selected == "A003") echo "selected"; ?> data_item=" , A003 State One, A003 State Two, A003 State Three">A003</option>
</select>
<!-- HTML Select 2 -->
<label for="city">Item : </label><select id="city" name="item" class="l"  onchange="onSelected()">

<script>
    function Func() {
        var city = document.getElementById('item');
        var state = document.getElementById('state');
        var val=state.options[state.selectedIndex].getAttribute('data_item');
        var arr=val.split(',');
        item.options.length = 0;
        for(i = 0; i < arr.length; i++) {
            if(arr[i] != "") {
                item.options[item.options.length] = new Option(arr[i],arr[i]);
            }
        }
    }

    function onSelected() {
        var item = document.getElementById('item').value;
        var state = document.getElementById('state').value;
        console.log('Parent : ' + state+ ', Item : ' + item);
    }
</script>

it load HTML Select One And then Select Item in HTML Select Two, But HTML Select Two Works Only By Manual User Select And Not Works For Default Programatically Value

Whole Of Codes Above Are On PHP File.

How i can fix it ?

score 2 · Answer 1 · edited May 23 '17 at 11:58

Not sure if it is relevant, but maybe you want a chained select box? If not, please clarify your question, it's very hard to follow.

EDIT: So the real issue is selecting the right option by code. In that case, this is a duplicate of How do I programmatically set the value of a select box element using javascript?.

In your onload script(or just after the functions if the script is at the bottom of the page), also run Func(), then set the value for #city:

Func();
var state = document.getElementById('state'),
    city = document.getElementById('city'),
    selectedCity = state.getAttribute('data-selected-city');
if(selectedCity) {
    city.value = selectedCity;
}

You need to store the selected city somewhere, my suggestion is to add it to the select:

<select id="state" data-selected-city="new-york">
<!--and so on--->
</select>

NOTE: setting a data attribute in HTML5 should begin with data-, not an underscore. So it's data-item="", not data_item="". That will give you a warning when running HTML validator.

thanks, but my issue is I want to choose Item programmatically i can't find solution, but by user Selected it works well — HK1988, Jun 12 '16 at 06:50

score 1 · Accepted Answer · answered Jun 12 '16 at 07:21

1

Put Out Of PHP Tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

On Script Tag Put :

$(function() {
    $("#state").on("change", Func()); 
});

After :

item.options[item.options.length] = new Option(arr[i],arr[i]);

put the code :

$(item).prop("selectedIndex",i);

answered Jun 12 '16 at 07:21

Hossein Kurd

3,184
3
41
71

Yes, It Works, Thank you – HK1988 Jun 12 '16 at 07:24

Run Function on default HTML Select with PHP And Javascript

2 Answers2