Change this jQuery to look for a word

This is related question that leakme and Alexander helped me with here. I don't have a QA server to upload this to.
If user selects "Canada", only states from Canada should be displayed in States ddl. If "US" is selected, only US states should show.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28562594.html

This works but I finally was able to get the dropdown working by adding a custom attribute.
Now, the ddl looks like this. It has "data-countrycode". It doesn't have "value=118-126".

   <select id="StateId">
                           
                                <option value="118" data-countrycode="126">
                                    Alabama
                                </option>
                                <option value="169" data-countrycode="25">
                                    Alberta
                                </option>
                     
                        </select>

How can I change this jquery to not looking for "dash"...but look for "data-countrycode". In the code below, i replaced the "-" with "data-countrycode". Switched the country but it only displayed one state.

I tried this but didnt work 
reverseLogic[i].value.indexOf("data-countrycode=" + "''"+ val +"''")

Open in new window


 jQuery(function($) {
        var reverseLogic = [];
        $("#StateId option:gt(0)").each(function(i, v) {
            reverseLogic.push({ value: $(this).val(), text: $(this).text() });
        });
        $("#CountryId").change(function() {
            var putAllBack = $(this).prop("selectedIndex") == 0;
            var val = $(this).val();
            $("#StateId option:gt(0)").remove();
            for (var i = 0; i < reverseLogic.length; i++) {
                if (putAllBack || reverseLogic[i].value.indexOf("-" + val) > 0) {
                    $("#StateId").append("<option value='" + reverseLogic[i].value + "'>" + reverseLogic[i].text + "</option>");
                }
            }
        }).change();
    });

Open in new window


This is how the Country ddl looks like

<select data-val="true"  id="CountryId" name="CountryId"><option value="Selects items">Country*</option>
<option value="25">Canada</option>
<option value="126">United States</option>
</select>

Open in new window

LVL 8
CamilliaAsked:
Who is Participating?
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.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Instead of targeting .val() you can use attr("data-countrycode")
0
CamilliaAuthor Commented:
Not sure where in that jQuery I should change to use attr("data-countrycode")?

What happens to "-" code in that jQuery?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Are you trying to create a chained select?  Select one thing, then that dictates what is in the next?  I use the chained plug in http://www.appelsiini.net/projects/chained

It looks very similar to what you are doing.  Just send all the data to the browser at once.  The 2nd select has the linked data from the first stored in the class.  Just make sure you have the jquery.chained js file loaded on your server.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>


<select id="mark" name="mark">
  <option value="">--</option>
  <option value="bmw">BMW</option>
  <option value="audi">Audi</option>
</select>
<select id="series" name="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Download your Guide
CamilliaAuthor Commented:
No way to change that jQuery?? I've already spent too much time on this. My manager will be on my case tomorrow. I don't want to spend more time implementing another solution and learn how to do that chain code.

>>Are you trying to create a chained select?
I already have all the data in "states" dropdown. Everything is loaded upfront. I just want to hide/display based on what country is selected.

If US is selected, I just want to display US states based on data-companycode value.
If CA is selected, hide US states and display CA states.

If there's no other way to change that jQuery, I'll look into the chains solution.
0
CamilliaAuthor Commented:
That chain solution...the first one...has it as "class" based solution. I don't have a class. I have data-countrycode.
0
CamilliaAuthor Commented:
I took a look again. Don't think it has to have "class" tag. I'm probably misunderstanding it. I'll try it and post back
0
HainKurtSr. System AnalystCommented:
Here is what you are trying to do:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>
</select>


<select id="StateId">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
</select>

<script>
$(function() {
  $("#CountryID").change(function(){
    $("#StateId option").remove();
    var $options = $("#StateIdAll option[data-countrycode='" + $(this).val() + "']").clone();
    $("#StateId").append($options);
  });
});
</script>

Open in new window


initially, put states of first country into StateId... and all states into StateIdAll, which is hidden...

then with jQuery, when CountryID changes, remove all options from StateID, and find states for selected country in StateIdAll, and dump into StateID :)
0
CamilliaAuthor Commented:
Thank you so much for doing this! I have a demo tomorrow with my boss and needed to get this done. Thanks again.
0
CamilliaAuthor Commented:
No, this is not going to work.

1. I bring up the page.
2. I load all the states. I need to have all this hidden (see #3 below) it's not hidden now but I need to make this change.
3. User has not selected a country so State dropdown should have all the states for Canada and US hidden.
4. User selected US. "data-countryid" is 126. Country Id is 126. At this point, I want to display states for US.
    and vice versa.

initially, put states of first country into StateId... and all states into StateIdAll, which is hidden...

Should I initially put ALL the states in 'StateIdAll"? If so, do I need an empty "StateId" ddl? if so, would your script work? let me try it with an HTML test page.

 (I've spent so much time on this, but very close)
0
HainKurtSr. System AnalystCommented:
StateId should have states for first country (first one will be selected in CountryID)
StateIdAll will have all states, and it will be hidden, will be used to find selected states...

so, initially, StateID will show only ststaes for first country...
when countr is changed, we will delete all from StateID, find all states from StateIdAll for selected countryID and dump all found states into StateID
0
CamilliaAuthor Commented:
I know what you're saying. But when I bring up with page, user hasn't selected anything from Country yet. I don't want to show any States if Country hasn't been selected. The dropdown has "select country" on it when the page is loaded.

But I think your code should work. I can have StateIdALL with all the states hidden.
Have StateId as empty. Nothing in it.

Then do your code still works

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>

</select>


<select id="StateId">

</select>

<script>
$(function() {
  $("#CountryID").change(function(){
    $("#StateId option").remove();
    var $options = $("#StateIdAll option[data-countrycode='" + $(this).val() + "']").clone();
    $("#StateId").append($options);
  });
});
</script>

Open in new window

0
HainKurtSr. System AnalystCommented:
I made it simpler for you:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>
</select>


<select id="StateId">
</select>

<script>
function GetAllStates(){
  $("#StateId option").remove();
  var $options = $("#StateIdAll option[data-countrycode='" + $("#CountryID").val() + "']").clone();
  $("#StateId").append($options);
}

$(function() {
  $("#CountryID").change(function(){
    GetAllStates();
  });
  GetAllStates();
});
</script>

Open in new window


just load all states into StateIdAll and good to go... SateId will be null initially
0
HainKurtSr. System AnalystCommented:
you need select a country on top? if yes here it is:

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<select id="CountryID">
<option value="0" data-countrycode="0">select a country...</option>
<option value="10" data-countrycode="126">US</option>
<option value="20" data-countrycode="25">Canada</option>
<option value="90" data-countrycode="25">Turkey</option>
</select>

<select id="StateIdAll" style="display:none">
<option value="111" data-countrycode="10">New York</option>
<option value="112" data-countrycode="10">Utah</option>
<option value="201" data-countrycode="20">Ontario</option>
<option value="201" data-countrycode="20">Alberta</option>
<option value="901" data-countrycode="90">Ankara</option>
<option value="902" data-countrycode="90">Istanbul</option>
</select>


<select id="StateId">
</select>

<script>
function GetAllStates(){
  $("#StateId option").remove();
  var $options = $("#StateIdAll option[data-countrycode='" + $("#CountryID").val() + "']").clone();
  $("#StateId").append($options);
}

$(function() {
  $("#CountryID").change(function(){
    GetAllStates();
  });
  GetAllStates();
});
</script>

Open in new window

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
CamilliaAuthor Commented:
Thanks, let me try it. I'll post later tonight.
0
CamilliaAuthor Commented:
Yes, I select a country on top. Without any country selection, my manager doesn't want to see any states in the ddl unless the user has selected a country. Let me try your second solution.
0
CamilliaAuthor Commented:
It works! but I have another issue. I have a jQuery datepicker on the page. That was working. Now that I add this country code, it breaks the datapicker.

(I can open another question, if needed).

This line breaks the datepicker
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

Open in new window


I don't know why the datepicker breaks. If I comment that date code out, country/state work. If I put date code back, then datepicker breaks.

I've attached the entire html page. I wonder if there's a jQuery conflict somewhere in there.
entirepage.txt
datepicker-error.png
0
HainKurtSr. System AnalystCommented:
put these

var $datepicker = $("#PurchaseDate");
$datepicker.datepicker({ maxDate: new Date() });
$datepicker.datepicker();
$datepicker.datepicker('setDate', '');

into

$(function() {
        $("#CountryId").change(function () {
           
            GetAllStates();
        });
        GetAllStates();
>>>>>> here
    });

and get rid of this code:

jQuery(function ($) {
        var $datepicker = $("#PurchaseDate");
        $datepicker.datepicker({ maxDate: new Date() });
        $datepicker.datepicker();
        $datepicker.datepicker('setDate', '');
});

and this should be another question, so i can get more points :)
0
CamilliaAuthor Commented:
ok, I just removed that line and both datepicker and country/state work.

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

Open in new window


But let me try your solution as well.
0
HainKurtSr. System AnalystCommented:
also, why do you have 2 jqueries here

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>

you are just calling for problems by adding 2 different version of same js library! get rid of one...
0
CamilliaAuthor Commented:
Yes, works the way you have it. I did remove that jquery-1.10.2 reference. It works without it. Maybe because it's in Scripts folder and MVC has a Bundle reference. Not sure.
0
CamilliaAuthor Commented:
Yes, removed one of them. I need to clean these libraries.

Thank you so much for being patient and sticking with this question.
0
CamilliaAuthor Commented:
Thanks again.
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
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.