mvc, jquery, html5

I have this simple jquery codes to read xml.
and when the first OnChange I try is working, but when I try to select another state like "FL", it is not working.
Basically, when I select "FL", Contractor 2 should be showed,
when I select "CA", Contractor 1 should be showed.
Can you help me?

 
<Surety>
  <SuretyLine>
    <Commercial>
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 1</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
 	</GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
            <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 2</Name>
          <State ID="bondState" PrefillValue="Yes">FL</State>
 	</GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
</Commercial>
</SuretyLine>
</Surety>

<script>
    function fnGetBondNameList(bondState) {
        $.ajax({
            url: "http://localhost:5489/BondList.xml",
            success: function (xml) {
                parseSelectXML(xml,"bondName","Bond",bondState)
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Status: " + xhr.status);
                alert("Error: " + thrownError);
            }
        });
    }
function parseSelectXML(xml, selectid, xmlnode,bondState) {
    var selecthtml = '';
    $(xml).find(xmlnode).each(function () {
        var selectBondName = $(this).find('GeneralInformation').find('Name').text();
        var selectBondState = $(this).find('GeneralInformation').find('State').text();
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {

            selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + selectBondState + ")" + '</option>';
        }
        //document.writeln(selecthtml);
    });
    //$(selectid).html(selecthtml);
    $('#' + selectid).append(selecthtml);
}
function parseSelectXML1(xml, selectid, xmlnode) {
    //var firstoption = '-- Please select --';
    //var firsthtml = '<option value="">' + firstoption + '</option>';
    var selecthtml = '';

    $(xml).find(xmlnode).each(function () {
        var selectvalue = $(this).find('GeneralInformation').attr('UI');
        var selecttext = $(this).find('GeneralInformation').attr('UI');
        selecthtml += '<option value="' + selectvalue + '">' + selecttext + '</option>';
        //document.writeln(selecthtml);
    });
    //$(selectid).html(selecthtml);
    $('#' + selectid).append(selecthtml);
}
</script>
                                <select class="select2" 
                                        id="bondState" 
                                        name="bondState" 
                                        onchange="fnGetBondNameList(this.options[this.selectedIndex].value);" 
                                        data-placeholder="Choose Bond State...">
                                    <option value=""></option>
                                    <option value="CA">CA</option>
				    <option value="FL">FL</option>
                                </select>
                           
                                <select class="select2"  id="bondName" name="bondName" data-placeholder="Choose bond name(s)...">
                                    
                                </select>
                                
                            

Open in new window

LVL 1
ITsolutionWizardAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Not really sure about your logic.

As it stands, you keep on adding values to the second dropdown regardless of what you select from the first dropdown. This will result in duplicate values and a constantly growing list.

If you're happy with that and just want to select the value in the second dropdown, then you need to use the val() call but you'd need to refactor your code slightly.

Take a look at this:

function parseSelectXML(xml, selectid, xmlnode, bondState) {
    var selecthtml = '', selectBondName;
    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            selectBondName = $(this).find('GeneralInformation').find('Name').text();
            selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ")" + '</option>';
        }
    });
    $('#' + selectid).append(selecthtml).val(selectBondName);
}

Open in new window

0
ITsolutionWizardAuthor Commented:
Thank You. For sure, I do not want duplicated the list/value.
and I try your script and does not seem working. The selected state does not work dynamically work the selected bonds / list.

If you can show me the entire codes included html5 and I will try again. Maybe I am missing something
0
Chris StanyonWebDevCommented:
Sure. Here's the full code. Tested and working fine:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>EE 29065188 // Chris Stanyon</title>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
         function fnGetBondNameList(bondState) {
            $.ajax({
                url: "BondList.xml",
                success: function (xml) {
                    parseSelectXML(xml,"bondName","Bond",bondState);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
        }

        function parseSelectXML(xml, selectid, xmlnode,bondState) {
            var selecthtml = '', selectBondName;
            $(xml).find(xmlnode).each(function () {
                if (bondState == $(this).find('GeneralInformation').find('State').text()) {
                    selectBondName = $(this).find('GeneralInformation').find('Name').text();
                    selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ")" + '</option>';
                }
            });
            $('#' + selectid).append(selecthtml).val(selectBondName);
        }
        </script>
    </head>
    <body>

        <select class="select2" id="bondState" name="bondState" onchange="fnGetBondNameList(this.options[this.selectedIndex].value);" data-placeholder="Choose Bond State...">
            <option value=""></option>
            <option value="CA">CA</option>
            <option value="FL">FL</option>
        </select>
                                   
        <select class="select2"  id="bondName" name="bondName" data-placeholder="Choose bond name(s)..."></select>

    </body>
</html>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

ITsolutionWizardAuthor Commented:
The filter does not work. When I select "CA", "FL" list is still shown up

 
<Surety>
  <SuretyLine>
    <Commercial>
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 1</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
  <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 2</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
            <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor asdfasd</Name>
          <State ID="bondState" PrefillValue="Yes">FL</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
</Commercial>
</SuretyLine>
</Surety>
0
Chris StanyonWebDevCommented:
Works perfectly for me !

What browser are you using?

Post up your full page code.
0
ITsolutionWizardAuthor Commented:
I use firefox
0
Chris StanyonWebDevCommented:
same as me ... and your code ?
0
ITsolutionWizardAuthor Commented:
I think it is because the issue you mentioned about the duplicated adding up to the value
0
Chris StanyonWebDevCommented:
Just had a thought - when you say FL is still showing up - do you mean it's still selected in the dropdown or is still listed in the drodown (but not selected)?
0
Chris StanyonWebDevCommented:
Sorry - think I see what you mean now. Simple enough to sort out. Change this line:

$('#' + selectid).append(selecthtml).val(selectBondName);

to this:

$('#' + selectid).html(selecthtml).val(selectBondName);

You don't need to append to the <select> - you just need to set the html of it. That would remove all the other previous options.
0
ITsolutionWizardAuthor Commented:
I will check soon ... for sure - u are the man !!! Good help
0
ITsolutionWizardAuthor Commented:
It still has one issue.

Assume I first selected CA and get 5 plans in CA, and I selected 1st plan in CA.
Then, I select FL, then now I see 1st plan in CA(The one I selected previous) & see 5 plans in FL (Which is right)

So, I think, the solution will be: If there is a way to clear all previous selected value first, then i may work. But I am not expert so I need your suggestion.. .Thanks
0
Chris StanyonWebDevCommented:
You're going to have to post you code up. When you select a new value from the 1st dropdown, it should clear the second one and add a  whole new set of options. If that's not what's happening, I'll need to see your code
0
ITsolutionWizardAuthor Commented:
The issue is there sure.

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>EE 29065188 // Chris Stanyon</title>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
         function fnGetBondNameList(bondState) {
            $.ajax({
                url: "BondList.xml",
                success: function (xml) {
                    parseSelectXML(xml,"bondName","Bond",bondState);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
        }

        function parseSelectXML(xml, selectid, xmlnode,bondState) {
            var selecthtml = '', selectBondName;
            $(xml).find(xmlnode).each(function () {
                if (bondState == $(this).find('GeneralInformation').find('State').text()) {
                    selectBondName = $(this).find('GeneralInformation').find('Name').text();
                    selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ")" + '</option>';
                }
            });
            $('#' + selectid).append(selecthtml).val(selectBondName);
        }
        </script>
    </head>
    <body>

        <select class="select2" id="bondState" name="bondState" onchange="fnGetBondNameList(this.options[this.selectedIndex].value);" data-placeholder="Choose Bond State...">
            <option value=""></option>
            <option value="CA">CA</option>
            <option value="FL">FL</option>
            <option value="TX">TX</option>
        </select>

        <select class="select2" id="bondName" name="bondName" data-placeholder="Choose bond name(s)..."></select>

    </body>
</html>
</body>
</html>

Open in new window

0
Chris StanyonWebDevCommented:
OK. I've already explained the problem you're having.

On line 37, you have this:

$('#' + selectid).append(selecthtml).val(selectBondName);

It should be this:

$('#' + selectid).html(selecthtml).val(selectBondName);
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ITsolutionWizardAuthor Commented:
i already replaced it. the issue is still occurred.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.