We help IT Professionals succeed at work.

Change this jQuery to look for a word

Camillia
Camillia asked
on
22 Comments
1 Solution
167 Views
Last Modified: 2014-11-25
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.

https://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

Comment
Watch Question

View Solution Only

Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
Instead of targeting .val() you can use attr("data-countrycode")
Camillia
CERTIFIED EXPERT

Author

Commented:
Not sure where in that jQuery I should change to use attr("data-countrycode")?

What happens to "-" code in that jQuery?
Scott FellDeveloper
CERTIFIED EXPERT
Fellow
Most Valuable Expert 2013

Commented:
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

Camillia
CERTIFIED EXPERT

Author

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.
Camillia
CERTIFIED EXPERT

Author

Commented:
That chain solution...the first one...has it as "class" based solution. I don't have a class. I have data-countrycode.
Camillia
CERTIFIED EXPERT

Author

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
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
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 :)
Camillia
CERTIFIED EXPERT

Author

Commented:
Thank you so much for doing this! I have a demo tomorrow with my boss and needed to get this done. Thanks again.
Camillia
CERTIFIED EXPERT

Author

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)
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
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
Camillia
CERTIFIED EXPERT

Author

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

HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
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
Sr. System Analyst
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Camillia
CERTIFIED EXPERT

Author

Commented:
Thanks, let me try it. I'll post later tonight.
Camillia
CERTIFIED EXPERT

Author

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.
Camillia
CERTIFIED EXPERT

Author

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
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
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 :)
Camillia
CERTIFIED EXPERT

Author

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.
HainKurtSr. System Analyst
CERTIFIED EXPERT

Commented:
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...
Camillia
CERTIFIED EXPERT

Author

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.
Camillia
CERTIFIED EXPERT

Author

Commented:
Yes, removed one of them. I need to clean these libraries.

Thank you so much for being patient and sticking with this question.
Camillia
CERTIFIED EXPERT

Author

Commented:
Thanks again.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.

View Solution