如何显示我的DIV？

Question

I have a one dropdown menu so when I click on first item, I want to show DIV id=city3. and while I select another item, It will show DIV id=km automatically.

Problem : While I select first item, Div id=city3 is not visible and while I select another item, Div id=km is visible. So I want to show div id=city3 while I select first item.

Here is code.

$("#city_to").change(function()
{
    var id=$(this).val();
    var dataString = 'id='+ id;
    if(id==1)
    {
         $("#city3").show();
         $(".km").hide();
         $(".distance").val('');
         $(".allowance1").val('');
         $(".hq_allowance1").val('');
         $(".exhq_allowance1").val('');
         $(".os_allowance1").val('');
         $(".total_allowance").val('');
         $(".total").val('');
    }
    else
    {   
        $(".km").show();
        $("#city3").hide();

        $(".allowance").val('');
        $(".hq_allowance").val('');
        $(".exhq_allowance").val('');
        $(".os_allowance").val('');
        $(".total_allowance1").val('');
        $(".total").val('');

        $.ajax
        ({
            type: "POST",
            url: "ajax_pages/km.php",
            data: dataString,
            cache: false,
            success: function(html)
            {
                $(".km").html(html);
            } 
        });
    }
});

Answer 1

See my example so you can understand the working process.

DEMO WORK

<ul>
    <li class="abc" data-id="abc1">Home</li>
    <li class="abc" data-id="abc2">about</li>
    <li class="abc" data-id="abc3">serive</li>
    <li class="abc" data-id="abc4">contact</li>
</ul>
<div class="mm" id="abc1">Home worlld</div>
<div class="mm" id="abc2">about worlld</div>
<div class="mm" id="abc3">Service worlld</div>
<div class="mm" id="abc4">Contact worlld</div>


$(document).ready(function(){
    $(".mm").hide();
    $(".abc").click(function(){
          var mm = $(this).data("id");
            $(".mm").hide();
            $("#"+mm).show();
      });
});