CODEWITHSUNDEEP
javascriptjquery
Magento 2
Magento 2

Reputation: 133

Print the value based on selection

I want to print a value based on selected value without submit and without reload the page 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
 $("#select").on("change", function() {
  //alert("Welcome to " + $(this).val());
    $('#text').html("Welcome to " + $(':selected').text())
}).trigger('change'); //trigger on page load

</script>
<select id="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<div id="text"></div>

I want to print if selected value is audi then it will print Welcome to Aundi like wise without reload and without submit

Upvotes: 0

Views: 80

Answers (3)

Kartikeya Khosla
Kartikeya Khosla

Reputation: 18873

Try this :-

$("#select").on("change", function(){
   $('#text').html("Welcome to " + $(':selected').text())
}).trigger('change'); //trigger on page load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<div id="text"></div>

Upvotes: 3

Shashank Shah
Shashank Shah

Reputation: 2167

$('select[name=nameOfSelect]').change(function() { alert("welcome to " + $(this).val()); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="nameOfSelect"> 
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Use .val to get the value of the selected option. See below,

<select> would be 

<select name="nameOfSelect">

then use.

$('select[name=nameOfSelect]').change(function() { alert("welcome to " + $(this).val()); });

hope it helps..:)

Upvotes: 0

aadesh
aadesh

Reputation: 33

you can use angular JS 

see following plunker for reference

your HTML
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>

  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MyController">
  <input type="checkbox" ng-model="myCheckbox" ng-change="cbSelected()" />
  <input type="text" ng-model="text1" readonly />
  <input type="text" ng-model="text2" ng-readonly="!myCheckbox" />
  <h3> {{text2}}</h3>
</body>

</html> 


App.js
ngular.module('myApp', [])
.controller('MyController', function($scope) {

  $scope.text1 = 'some-text';

  $scope.cbSelected = function() {
      if ($scope.myCheckbox) {  // when checked
        $scope.text2 = angular.copy($scope.text1);
      } else {
        $scope.text2 = "";
      }
  };
});

Customise according to your requirement 
http://plnkr.co/edit/vURMjLxArLsRSKZj5o9q?p=preview

Upvotes: 0

Related Questions