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 ?

what is Default Function?

brk
– brk

2016-06-11 13:57:08 +00:00
Commented Jun 11, 2016 at 13:57 — brk
– brk, Commented Jun 11, 2016 at 13:57

Community · Accepted Answer · 2017-05-23 11:58:43Z

2

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.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 11, 2016 at 17:55

Ruben Vincenten

9074 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HK1988 Over a year ago

thanks, but my issue is I want to choose Item programmatically i can't find solution, but by user Selected it works well

Hossein Kurd · Accepted Answer · 2016-06-12 07:21:41Z

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, 2016 at 7:21

Hossein Kurd

4,6553 gold badges50 silver badges72 bronze badges

1 Comment

HK1988 Over a year ago

Yes, It Works, Thank you

Collectives™ on Stack Overflow

Run Function on default HTML Select with PHP And Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related