Tabla HTML

Fila # 1:Col 1 [Country DropDown] |Col # 2 [StateDropDown]

Fila # 2:Col 1 [Country DropDown] |Col 2 [StateDropDown]

la mesa tiene 2dropdownlists, paraCountry & State - esto funciona en un menú desplegable,¡pero también deshabilita las listas desplegables de otros / estados!

El problema es, mientrasambos Estados Unidos y Aust tienendiff states selected texto, pero encol2 terminar conmismo seleccionadoState ID / valor3 (Si selecciono California, ¡Perth también está deshabilitado!, Por lo tanto, mi código los deshabilita como duplicados ya que compara el valor seleccionado y no el texto) por ejemplo Esta selección desactiva Perth.

[USA]      ->    [California]  (value = 3)
[Australia] ->   [Perth]       (*also* has value= 3) so its disabled

Cómo hacer esto como ununique combination tanto del país como del estado en cada fila? o simplemente comparar textos de las listas desplegables? ...

es decir, la Opción 1,cómo verificar si ambosCountry ID + State ID Value already exist?Opción 2, solo compara los textos seleccionados (se siente medio cocido)

JS Fiddle

// Javascript Does not disable States previously selected
$("#CountryTable").on('change', '.State', function() {
var dropDownText = $('#CountryTable .State select').not(this).map(function()                {
 return this.SelectedText; // does not work this.val() works but useless
}).get();
var selectedValue = $(this).val();
var otherDropdowns = $('.State').not(this);

otherDropdowns.find ('opción [valor =' + selectedValue + ']'). prop ('disabled', verdadero); });

<table id="CountryTable">
<tbody id="CountryTableBody"> 
    <tr class="row">
        <td>
            <select>
                <option value="1">Country A</option>
                <option value="2">Country B</option>
                <option value="3">Country C</option>
            </select>               
        </td>

        <td>
            <select>
                <option value="1">State 1</option>
                <option value="2">State 2</option>
                <option value="3">State 3</option>
                <option value="4">State 4</option>
                <option value="5">State 5</option>
            </select>               
        </td>           
    <tr>  <!-- in JS prevent previous selection -->
    <tr class="row">
       <td>
            <select>
                <option value="1">Country A</option>
                <option value="2">Country B</option>
                <option value="3">Country C</option>
            </select>               
        </td>
        <td>
            <select>
                <option value="1">State 1</option>
                <option value="2">State 2</option>
                <option value="3">State 3</option>
                <option value="4">State 4</option>
                <option value="5">State 5</option>
            </select>               
        </td>          
    <tr>    
</tbody>   

*** Imagen para mostrar algosimilar... no es correcto