asked on

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

Chris Stanyon

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

ITsolutionWizard

ASKER

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

Chris Stanyon

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

ITsolutionWizard

ASKER

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>

Chris Stanyon

Works perfectly for me !

What browser are you using?

Post up your full page code.

ITsolutionWizard

ASKER

I use firefox

Chris Stanyon

same as me ... and your code ?

ITsolutionWizard

ASKER

I think it is because the issue you mentioned about the duplicated adding up to the value

Chris Stanyon

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)?

Chris Stanyon

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.

ITsolutionWizard

ASKER

I will check soon ... for sure - u are the man !!! Good help

ITsolutionWizard

ASKER

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

Chris Stanyon

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

ITsolutionWizard

ASKER

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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ITsolutionWizard

ASKER

i already replaced it. the issue is still occurred.