Saurabh Sharma Saurabh Sharma - 1 month ago 10
HTML Question

How to get selected value from customized Dropdown in node.js

I have customized DropDown in html

<button>Select your city</button>
<ul>
<li class="custom-radio">
<input name="item-brand-name" type="radio" id="create0221">
<label for="create0221">Bradford</label>
</li>
<li class="custom-radio">
<input name="item-brand-name" type="radio" id="create0231">
<label for="create0231">Cambridge</label>
</li>
<li class="custom-radio">
<input name="item-brand-name" type="radio" id="create0241">
<label for="create0241">Chester</label>
</li>
<li class="custom-radio">
<input name="item-brand-name" type="radio" id="create0251">
<label for="create0251">Durham</label>
</li>
<li class="custom-radio">
<input name="item-brand-name" type="radio" id="create0261">
<label for="create0261">Glasgow</label>
</li>
</ul>


Now I want to get selected li's value and save into database. like in Textbox I use
name="textbox1"
and
ng-model="user.textbox1"
.
I am sending data in node.js using ng-model.
Please tell me how to achieve the same with customized Dropdown. There is a button when click on that button the dropdown list will appear then select a li. That selected li's value will replace the value of button.

Thanks

Answer

Not sure how you will make a dropdown using ul and li. They are used to create list not dropdown. You need a select tag with ng-repeat.

<select ng-change="fruitselect(fruitname)" ng-model="fruitname">
    <option ng-repeat="fruit in fruits" value="{{fruit}}">{{fruit}}</option>
</select>

And in js,

$scope.fruits = ['apple', 'orange','banana', 'grapes', 'plum'];

$scope.fruitselect = function(){

  alert('Ohh. You like ' + $scope.fruitname);
  // then an http call to send data to server
  $http.post('url',$scope.fruitname)
       .then(function(response){
       //do something
     })
}